如何更改反应组件中的reactid后缀

Posted 2023-03-07

【中文标题】如何更改反应组件中的reactid后缀

【英文标题】：How to change reactid suffix in react component

【发布时间】：2016-06-22 09:04:21

【问题描述】：

如何在 react 中将 data-reactid 属性更改为我的自定义属性，例如 data-hello="world"？

<a data-reactid="......" ></a>

【问题讨论】：

请向我们展示您的努力。到目前为止你做了什么。

这是你想要做的吗？ ***.com/q/31273093/74230

实际上没有理由在反应中使用数据属性。无论你想要达到什么目的，都应该以其他方式完成。

@BlairAnderson:data- 属性非常适合使用 CSS，无论使用什么框架制作 html

@dandavis 那是什么课程？它们也与框架无关。

【参考方案1】：

更新：从 React 15 开始，data-reactid 已被删除，并且永远不会作为属性写入 DOM

简短的回答：不要触摸 data-reactid。曾经。它是 React 的重要组成部分，主要用于在更改虚拟 DOM 树时执行正确的 DOM 操作。假装它不存在。

但是，您可以按照自己的方式添加自己的 data- 属性：

render () 
    return (
        <h1 data-hello=this.props.hello>this.props.title</h1>
    );

工作示例：https://jsfiddle.net/0or98zjx/

【讨论】：

在你的代码中我仍然可以看到

当然，正如我所说，React 会注入 data-reactid，因为它是 React 在 DOM 更改时挂钩的内容。你到底想做什么？如果要操作 data-reactid，可以将 key="myId" 传递给组件。输出将是<h1 data-reactid=".0.$myId">，但这仅在迭代数组或类似的东西时才需要。查看更新的小提琴：jsfiddle.net/0or98zjx/2

【参考方案2】：

React 创建虚拟 DOM a，它测量实际 DOM 和虚拟 DOM 之间的差异，如果有任何变化，它会改变虚拟 DOM。所以 react.id 将成为虚拟 DOM 的一部分。