ReactJs:是否可以通过类名呈现DOM到文档?

ReactJs: Is it possible to render DOM to document by class name?

本文关键字：DOM 文档 是否 可以通过 ReactJs      更新时间：2023-09-26

我正在学习ReactJs，真的很喜欢它。我想问一下，我们是否可以通过类名渲染虚拟DOM到文档。

React.render(
    <CommentBox url="data/comments.json" pollInterval={2000} />,
    document.getElementById('class')
);

我试图通过

getElementByClassName(类)

作为react的render方法的第二个参数，它不起作用。是否React只渲染DOM与ID的节点，还是有一个解决方案，使用类的节点?

看来你用错了方法。

也许你应该用getElementsByClassName而不是getElementByClassName。不要忘记getElementsByClassName返回一个类似数组的obj HTMLCollection，所以选择第一个元素是必要的。

React.render(
  <CommentBox url="data/comments.json" pollInterval={2000} />,
  document.getElementsByClassName('className')[0]
);

更多信息，请查看文档

要回答上面答案中Sam的问题，正如@xcatliu指出的，getElementsByClassName返回一个类似数组的HTML元素列表，因此您可以使用for循环来迭代它。

这样，相同的React组件将被呈现为具有相同class属性的每个HTML元素的子元素。

像下图:

class Component extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    return (
      <p>Hello</p>
    )
  }
}
for (let i = 0; i < document.getElementsByClassName("container").length; i++) {
  ReactDOM.render(<Component />, document.getElementsByClassName("container")[i]);
}

相关文章：