如何將多個DOM元素附加到用reactjs創建的元素上？

Question

我剛剛開始使用reactjs，還沒有做很多動手工作。 到目前為止，我已經能夠使用JSXTransformer.js通過reactjs創建DOM元素。 我遇到的問題是，當我嘗試在DOM元素中創建多個元素時，它將舊元素替換為新元素。

也就是說，如果我想創建div_B ， div_C和div_D在mainDiv ，它只是增加了div_D在mainDiv ，因為它是創造最后一次。 但我想在mainDiv附加所有三個div。

我正在使用的代碼如下：

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太多，請嘗試將其編譯為Javascript 。 這是一個實時示例。 我通過的段落數是一個道具。