React 组件 - 有更好的方法吗？

Question

My first React component. Kind of pointless but it's a starting point. I have a page and want to render all the headers on the page. I have many similar elements thus (with different values for data-headertext):

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

I have built a React class component thus:

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]);
  }
}

It works perefectly. EXCEPT.

I've had to add a dummy div tag which is not displayed to fulfil the ReactDOM.render parameters, thus:

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

This doesn't seem right. How should I be handling this? So I don't need to have this hidden div tag. Thanks in advance.

Answer 1

I would do something along the lines of:

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

I wouldn't rely on CSS to hide content like this. It defeats the point of using React. Another idea would be to show a spinner while you're waiting on your params to load.

Unrelated and I could be wrong as I use functional React instead of class based React but you don't need to use React.Fragment anymore. Just use <></>.