2015-05-12 20 views
17

React.createElement bir yayılmasını alır "çocuklar" parametresi`(JSX olmadan) React.createElement` çocukların parametresini

var d = React.DOM; 

React.createElement(LabeledElement, {label: "Foo"}, 
    d.input({value: "foo"}) 
) 

kullanmak ama Aslında bunu

var LabeledElement = React.createClass({ 
    render: function() { 
     return d.label({} 
      ,d.span({classNames: 'label'}, this.props.label) 
      , //How to place children here? 
    } 
}) 
nasıl kullanılacağına dair herhangi bir belge nasıl

Bunun gerçekten çok basit bir cevabı olduğundan eminim.

cevap

31

çocuk JSX iç içe geçme ile veya React.createElement için üçüncü + bağımsız değişken ile, ya da bir bileşen geçirilen this.props.children olarak bileşeni gösterir:

var MyLabel = React.createClass({ 
    render: function() { 
    return React.createElement("label", {className: "label"}, 
     React.createElement("span", {className: "label"}, this.props.label), 
     this.props.children 
    ); 
    } 
}); 

var App = React.createClass({ 
    render: function() { 
    return React.createElement(MyLabel, {label: "Here is the label prop"}, 
     React.createElement("div", {}, 
     React.createElement("input", {type: "text", value: "And here is a child"}) 
    ) 
    ); 
    } 
}); 

Örnek: http://jsfiddle.net/BinaryMuse/typ1f2mf/; dokümanlar: http://facebook.github.io/react/docs/multiple-components.html#children

+0

Ah teşekkürler. "Sahne" nin * içine * bakmayı asla düşünmedim –