reactjs - tutorial - react render jsx
Cómo utilizar el parámetro de los hijos `React.createElement`(sin jsx) (1)
React.createElement
toma un parámetro "niños" extendido
var d = React.DOM;
React.createElement(LabeledElement, {label: "Foo"},
d.input({value: "foo"})
)
pero no puedo encontrar ninguna documentación sobre cómo usarlo realmente
var LabeledElement = React.createClass({
render: function() {
return d.label({}
,d.span({classNames: ''label''}, this.props.label)
, //How to place children here?
}
})
Estoy seguro de que esto tiene una respuesta realmente muy simple.
Los hijos pasados a un componente, ya sea a través de JSX nesting o mediante el tercer argumento + a React.createElement
, aparecen en el componente como this.props.children
:
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"})
)
);
}
});
Ejemplo: http://jsfiddle.net/BinaryMuse/typ1f2mf/ ; docs: http://facebook.github.io/react/docs/multiple-components.html#children