Question

我正在学习ReactJs并且非常喜欢它。我想问一下我们是否可以按类名呈现虚拟DOM。

audioLink

我试图传递

getElementByClassName（＆＃39;类＆＃39）

作为反应渲染方法的第二个参数，它不起作用。 React是否仅将DOM呈现给仅具有ID的节点，或者是否也有使用具有类的节点的解决方法？

Answer 1

您似乎使用了错误的方法。

您可能应该使用getElementsByClassName代替getElementByClassName。并且不要忘记getElementsByClassName返回类似于数组的obj HTMLCollection，因此选择第一个元素是必要的。

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

有关详细信息，请查看docs。

Answer 2

为了回答上面答案中的 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]);
}

ReactJs：是否可以按类名称将DOM呈现给文档？

2 个答案: