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过多，请尝试编译它to Javascript。 Here是一个实例。我把段落数作为道具。

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

1 个答案: