如何在沒有JSX的情況下渲染多個孩子

Question

如何在不使用JSX的情況下編寫此代碼？

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

這個來自react.js教程：http://facebook.github.io/react/docs/tutorial.html

我知道我能做到以下幾點：

return (
    React.createElement('div', { className: "commentBox" }, 
     React.createElement('h1', {}, "Comments") 
) 

但是，這只是增加了一個元素。我怎樣才能添加更多的相鄰。

Answer 1

您可以使用在線JSX Compiler作爲一個快速的方法來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) 
    ) 
    ); 
    } 
}); 

這對檢查轉換器輸出的ES6轉換支持的功能也很方便。

Answer 2

你只需要添加他們陸續爲孩子的父組件，

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

Answer 3

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的交互式示例，請參閱此jsbin。

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

Answer 4

，如果你有一個可變數量的孩子，那麼你可以使用： 使用應用內搭的參數數組功能。

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; 
    }