通常向组件添加自定义属性

Question

我是Reactjs的新手。我试图一般性地添加自定义属性以响应组件。这是我的用例...

对于一个名为HelloWorld的React组件，我希望DOM显示data-js-class =“ HelloWorld”属性。之所以要这样做，是因为当我在开发工具中检查DOM时，可以快速识别出呈现该DOM的组件。

我可以通过进入开发工具的React选项卡并跳到生成的DOM元素来做同样的事情。 通过在每个单个组件中添加属性，我也可以在组件render（）方法中执行相同的操作。但是我不想在每个组件中都这样做。我希望它在框架级别神奇地发生。

我试图备份React.createElement并编写自己的自定义createElement，最终将调用原始的React.createElement（）方法。这不是一个优雅的解决方案。

在基本React.Component类上，我添加了一个createElement（）（到React.Component.prototype）方法。组件的render方法调用“ this.createElement（...）而不是“ React.createElement（）”。但这也不是很优雅，因为也存在该解决方案无法处理的JSX。

class HelloWorld extends React.Component {
  render() {
    return React.createElement(
      'h1',
      null, //this.props
      'Hello world'
    )
  }
}

...应该呈现

<h1 data-js-class="HelloWorld">Hello World</h1>

实现这一目标的最优雅的方法是什么？

Answer 1

  

实现这一目标的最优雅的方法是什么？

我相信添加元数据是为了检查哪个组件生成了DOM。

您只需进入React devtool并找出生成了哪个DOM节点，如下所示。