Блог

Мой первый компонент React. Вроде бессмысленно, но это отправная точка. У меня есть страница, и я хочу отобразить все заголовки на странице. Таким образом, у меня много похожих элементов (с разными значениями для data-headertext):

 <div class="col-md-12 col-sm-12 p-0 headerText" data-headertext="Browse"></div>
  

Я создал компонент класса React таким образом:

 class Header extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <React.Fragment>
        <div className="row">
          <div className="col-md-6 col-sm-6"><h5 className="pl-2">{this.props.headertext}</h5></div>
          <div className="col-md-6 col-sm-6 visHiddenRight" id={this.props.headertext   "BackDiv"}><h5 className="pr-2 mouseover" onClick={() => {back(this.props.headertext);}}>Back</h5></div>
        </div>
        <hr className="hrOrange mt-2" />
      </React.Fragment>
    );
  }
}

let elems = document.getElementsByClassName("headerText");

ReactDOM.render(
  renderToElements(Header, elems, 'headertext'), document.getElementById("root")
);

function renderToElements(toRender, elements, dataset) {
  for (var i = 0; i < elements.length; i  ) {
    let passText = elements[i].dataset[dataset];
    let renderEl = React.createElement(toRender, { headertext: passText })
    ReactDOM.render(renderEl, elements[i]);
  }
}
  

Это работает отлично.
КРОМЕ.

Мне пришлось добавить фиктивный тег div, который не отображается для выполнения параметров ReactDOM.render, таким образом:

 <div id="root" style="display:none;"></div>
  

Это не кажется правильным.
Как мне с этим справиться? Поэтому мне не нужен этот скрытый тег div.
Заранее спасибо.

Я бы сделал что-то вроде:

 // Header.ts
<div>
   { props ? <Header {...data} /> : null }
</div>
  

Я бы не стал полагаться на CSS, чтобы скрыть подобный контент. Это лишает смысла использовать React. Другой идеей было бы показать счетчик, пока вы ожидаете загрузки своих параметров.

Не связано, и я могу ошибаться, поскольку я использую функциональный React вместо React на основе классов, но вам не нужно использовать React.Фрагментировать больше. Просто используйте <></> .