Question

我想创建一个React.JS组件，可以使用div元素的 classname 而不是 id 在多个位置呈现。

呈现组件的常规方法是：

React.render(<Component/>, document.getElementById('id'))

虽然我不知道它是否＆＃39;可以这样做：

React.render(<Component/>, document.getElementsByClassName)?

Answer 1

React.render只占用一个DOM元素。如果您想多次渲染它，只需遍历节点即可。

function renderToElements(toRender, elements) {
  for (var i = 0; i < elements.length; i++) {
    React.render(toRender, elements[i]);
  }
}

renderToElements(..., document.getElementsByClassName("className"));

Answer 2

刚刚添加@Michelle Tilley的回答，我真的很想做这个技术，同时抓住每个元素的数据集作为道具传入。关键是传递 ComponentName 没有引号或括号，然后传递给createElement：

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

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

renderToElements(ComponentName, elems, 'id')

在多个div标签中渲染reactjs组件

2 个答案: