Javascript 如何在没有JSX的情况下呈现多个子对象

如何在不使用JSX的情况下编写此文件

 var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList />
        <CommentForm />
      </div>
    );
  }
});

---

但这只增加了一个元素。我怎样才能添加更多相邻的组件。

您只需将它们作为子组件一个接一个地添加到父组件中

return React.createElement("div", null, 
      React.createElement(CommentList, null), 
      React.createElement(CommentForm, null)
    );

您可以使用online（）快速地将JSX的小块转换为等效的JavaScript

var CommentBox = React.createClass({displayName: 'CommentBox',
  render: function() {
    return (
      React.createElement("div", {className: "commentBox"}, 
        React.createElement("h1", null, "Comments"), 
        React.createElement(CommentList, null), 
        React.createElement(CommentForm, null)
      )
    );
  }
});

---

它还可以方便地检查transpiler为其支持的ES6转换输出的内容。

insin的答案是直接翻译，但您可能更喜欢使用工厂

var div = React.createFactory('div'), h1 = React.createFactory('h1');

var CommentBox = React.createClass({displayName: 'CommentBox',
  render: function() {
    return (
      div({className: "commentBox"}, 
        h1(null, "Comments"), 
        React.createElement(CommentList, null), 
        React.createElement(CommentForm, null)
      )
    );
  }
});

createFactory实际上部分应用createElement。因此，以下是等效的：

React.createElement(c, props, child1, child2);
React.createFactory(c)(props, child1, child2);

如果您只是在使用es6，但不喜欢JSX，那么可以通过分解分配使其不那么冗长。有关使用6to5而不是jsx的交互式示例，请参见此

var [div, h1, commentForm, commentList] = [
    'div', 'h1', CommentForm, CommentList
].map(React.createFactory);

---

如果您的孩子数量可变，则可以使用： 使用接受参数数组的apply函数

React.createElement.apply(this, ['tbody', {your setting}].concat(this.renderLineList()))

其中renderLineList是示例：

renderLineList: function() {
        var data=this.props.data;
        var lineList=[];
        data.map(function(line) {
            lineList.push(React.createElement('tr', {your setting}));
        });
        return lineList;
    }

---

我遇到了这个问题，需要花一段时间通过逐步执行解释器源代码来解决：

var arrayOfData = [];
var buildArray = (function () {
    var id;
    var name;
    return{
        buildProc(index, oneName){

                id =  index;
                name =  oneName;
                arrayOfData[index] = (React.createElement('Option', {id},name));
        }
    }
})();
// then 
this.state.items = result;
var response = parseJson.parseStart(this.state.items);
var serverDims = response.split(":");
for (var i = 1; i < serverDims.length; i++) {
    buildArray.buildProc(i, serverDims[i] )
}

// then
 render(){
    const data = this.props.arrayOfData;

    return (
        React.createElement("select", {},
               data
        )
    // {data} Failed with "object not a valid React child,  data with no curly's worked

    )          
}

var arrayOfData=[]；
var buildArray=（函数（）{
变量id；
变量名；
返回{
buildProc（索引，oneName）{
id=索引；
name=oneName；
arrayOfData[index]=（React.createElement（'Option'，{id}，name））；
}
}
})();
//然后
this.state.items=结果；
var response=parseJson.parseStart（this.state.items）；
var serverDims=response.split（“：”）；
对于（变量i=1；i

非常感谢您分享此

。应用
方法我一直收到
警告：数组或迭代器中的每个子级都应该有一个唯一的“key”属性。检查
工具栏按钮
的渲染方法。看见https://fb.me/react-warning-keys 更多信息。“react.dev.js:18780:9
这就是修复它的方法。我不在乎和解，只是想让react.js的dev版本中的警告闭嘴哈哈
var arrayOfData = [];
var buildArray = (function () {
    var id;
    var name;
    return{
        buildProc(index, oneName){

                id =  index;
                name =  oneName;
                arrayOfData[index] = (React.createElement('Option', {id},name));
        }
    }
})();
// then 
this.state.items = result;
var response = parseJson.parseStart(this.state.items);
var serverDims = response.split(":");
for (var i = 1; i < serverDims.length; i++) {
    buildArray.buildProc(i, serverDims[i] )
}

// then
 render(){
    const data = this.props.arrayOfData;

    return (
        React.createElement("select", {},
               data
        )
    // {data} Failed with "object not a valid React child,  data with no curly's worked

    )          
}