jak renderować wiele dzieci bez JSX

Question

Jak napisać to bez użycia JSX?

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

ten pochodzi z samouczka react.js: http://facebook.github.io/react/docs/tutorial.html

wiem, że mogę wykonać następujące czynności:

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

Ale to dodaje tylko jeden element. Jak mogę dodać więcej obok siebie.

Answer 1

Można użyć Internetowy JSX Compiler jako szybki sposób przekonwertować małe kawałki JSX do analogicznego 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) 
    ) 
    ); 
    } 
}); 

Jest także przydatny do sprawdzania, jakie wyniki dla transformatora ES6 obsługuje.

Answer 2

Wystarczy dodać je jeden po drugim, jak dzieci do komponentu macierzystego

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

Answer 3

insin's odpowiedź jest bezpośrednim tłumaczeniem, jednak możesz preferować fabryki.

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 zasadniczo stosuje częściowo metodę createElement. Więc następujące są równoważne:

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

Jeśli jesteś po prostu używając ES6 ale nie lubią JSX można uczynić go mniej gadatliwy z cesją rozpad. Zapoznaj się z tym jsbin, aby uzyskać interaktywny przykład, używając 6to5 zamiast jsx.

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

Answer 4

jeśli masz zmienną liczbę dzieci, a następnie można użyć, aby: Korzystanie z funkcji, które podjąć szereg parametrów zastosowania.

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

gdzie renderLineList jest na przykład:

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