javascript - 如何将多个 DOM 元素附加到使用 ReactJS 创建的元素？

Question

我刚刚开始使用reactjs，并没有做过太多实际操作。到目前为止，我可以使用 JSXTransformer.js 通过 Reactjs 创建 DOM 元素。我遇到的问题是，当我尝试在 DOM 元素中创建多个元素时，它会用新元素替换旧元素。

也就是说，如果我想在 mainDiv 中创建 div_B、div_C 和 div_D，只需添加div_D 位于 mainDiv 中，因为它是最后创建的。但我想将所有三个 div 附加到 mainDiv 中。

我使用的代码如下:

var props = [];
function getEle(id) {
    return document.getElementById(id);
}
function setProps(ele, Css, inner, id) {
    props.element = ele;
    props.CssClass = Css;
    props.innerText = inner;
    props.id = id;
    return props;
}
function createElement(properties , element){
    var CreateDiv = React.createClass({
        render : function(){
            return <div className = {this.props.elementProps.CssClass} id={this.props.elementProps.id}>{this.props.innerText}</div>;
        }
    });
    React.render(<CreateDiv elementProps = {properties} />, element);
}

setProps("div", "divBClass", "", "div_B");
createElement(props, getEle("mainDiv"));

setProps("div", "divCClass", "", "div_C");
createElement(props, getEle("mainDiv"));

setProps("div", "divDClass", "", "div_D");
createElement(props, getEle("mainDiv"));

这段代码有什么问题吗？

Answer 1

您仍然以命令式的方式思考您的代码。 React 基于声明式编程范例。

首先，将整个应用程序视为一个 React 组件。

var App = React.createClass({
  render: function() {
    return (
      <div>foo</div>
    );
  }
})

React.render(<App />, document.body);

现在，让我们首先渲染一些段落:

var App = React.createClass({
  render: function() {
    // construct array [0, 1, 2]
    var values = [];
    for (var i=0; i<this.props.noDivs; i++) {
      values.push(i);
    }

    // return <p>0</p> <p>1</p> ...
    return (
      <div>
      {values.map(function (value) {
        return <p key={value}>Value {value}</p>;
      })}
      </div>
    );
  }
})

React.render(<App noDivs={3} />, document.body);

如果JSX太多，尝试编译一下to Javascript 。 Here就是一个活生生的例子。我将段落数作为 Prop 传递。