Блог

Я новичок в reactjs. Я пытаюсь в общем добавить пользовательские свойства к компонентам react. Вот мой пример использования…

Для компонента react с именем HelloWorld я хочу, чтобы DOM отображал данные атрибута-js-class=»HelloWorld». Причина, по которой я хочу это сделать, заключается в том, что, когда я проверяю DOM в dev tools, я могу быстро определить компонент, который отображал эту часть DOM.

Я могу сделать то же самое, перейдя на вкладку React инструментов разработчика и перейдя к сгенерированному элементу DOM. Я также могу сделать то же самое в методе components render(), добавив свойства в каждый отдельный компонент. Но я не хочу делать это в каждом отдельном компоненте. Я хочу, чтобы это произошло волшебным образом на уровне фреймворка.

Я попытался создать резервную копию React.createElement и написать свой собственный пользовательский createElement, который в конечном итоге вызывает исходный метод React.createElement() . Это не было элегантным решением.

На основе React.В классе компонентов я добавил createElement() (в React.Метод Component.prototype). Метод визуализации компонента вызывает «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>
  

Какой был бы самый элегантный способ достижения этого?

Какой был бы самый элегантный способ достижения этого?

Я считаю, что добавление метаданных для проверки того, какой компонент сгенерировал DOM.

Вы можете просто перейти к инструменту React devtool и узнать, какой узел DOM был сгенерирован, как показано ниже.