Question

我必须从我的JS渲染多个DOM元素。

说我div喜欢

  <div id="div1"><div>
   //Some Html tags
  <div id="div2"><div>
   //Some Html tags
  <div id="div3"><div>
   //Some Html tags

我需要渲染这三个div。每个div都包含一组单选按钮。单击任何div中的任何单选按钮，我将执行验证休息调用，并根据结果我只显示有效的单选按钮（这意味着我必须更新每个div的状态。）。

我用过这样的东西：

var divs=[
          {"name":"one","element":"div1"},
          {"name":"two","element":"div2"},
          {"name":"three","element":"div3"}
         ];
for(var elem in divs){
    ReactDOM.render(
            <ElementBox name = {divs[elem].name} / > ,
            document.getElementById(divs[elem].element)
    );
}

但是如果我使用这种方法，事件处理是忙乱的。意味着我无法在验证后找到更新其他div状态的任何方法。

有没有其他方法可以在一个元素中呈现多个容器？</ p>

Answer 1

是的：典型的反应是只有1 ReactDOM.render()来启动反应引擎。并在反应组件中进行所有其他渲染。

这样的事情：

class ElementsBox extends React.Component {
  render() {
    return <div id={this.props.element}>{this.props.name}</div>
  }
}

class ElementsContainer extends React.Component {
  render() {
    return (
      <div>
        {this.props.elements.map(function(element) {
          return <ElementBox element={element} key={element.element}/>
        });}
      </div>
    );
  }
}

ReactDOM.render(<ElementsContainer elements={divs}/>,
                document.getElementById('myreactrootinHTML'));

PS：使用react的不可避免的后果是你总是在容器中得到一个容器，如下所示：

<div id='myreactrootinDOM'>    // needs to be here so react can launch somewhere
  <div>                        // react root can always only render 1 DOM element
    <div id='div1'></div>      // lower levels can have more than 1 component
    <div id='div2'></div>
    <div id='div3'></div>
  </div>
</div>

在react js中渲染多个容器

1 个答案: