cách kết xuất nhiều trẻ em mà không cần JSX

Question

Cách viết mã này mà không cần sử dụng JSX?

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

này xuất phát từ react.js hướng dẫn: http://facebook.github.io/react/docs/tutorial.html

Tôi biết tôi có thể làm như sau:

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

Nhưng điều này chỉ hỗ trợ thêm một phần tử. Làm thế nào tôi có thể thêm nhiều hơn bên cạnh nhau.

Answer 1

Bạn có thể sử dụng trực tuyến JSX Compiler như là một cách nhanh chóng để chuyển đổi khối ít JSX với JavaScript tương đương.

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

Cũng tiện dụng để kiểm tra xem đầu ra của trình chuyển đổi cho ES6 biến đổi nó hỗ trợ.

Answer 2

Bạn chỉ cần thêm họ cái khác như trẻ em thành phần cha mẹ của bạn,

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

Answer 3

câu trả lời của Insin là bản dịch trực tiếp, tuy nhiên bạn có thể thích sử dụng các nhà máy.

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 chủ yếu áp dụng một phần createElement. Vì vậy, sau đây là tương đương:

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

Nếu bạn chỉ sử dụng ES6 nhưng không thích JSX, bạn có thể làm cho nó ít tiết hơn với nhiệm vụ phá hủy. Xem này jsbin cho một ví dụ tương tác bằng cách sử dụng 6to5 thay vì jsx.

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

Answer 4

nếu bạn có một số biến của trẻ em sau đó bạn có thể sử dụng: Sử dụng áp dụng chức năng mà có một mảng các tham số.

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

nơi renderLineList là ví dụ:

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