如何使用 `React.createElement` 子参数(不带 jsx) [英] How to use `React.createElement` children parameter (without jsx)
本文介绍了如何使用 `React.createElement` 子参数(不带 jsx)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
React.createElement
接受一个扩展的children"参数
React.createElement
takes a spread "children" parameter
var d = React.DOM;
React.createElement(LabeledElement, {label: "Foo"},
d.input({value: "foo"})
)
但我找不到任何关于如何实际使用它的文档
but I can't find any documentation on how to actually use it
var LabeledElement = React.createClass({
render: function() {
return d.label({}
,d.span({classNames: 'label'}, this.props.label)
, //How to place children here?
}
})
我相信这有一个非常简单的答案.
I'm sure this has a really really simple answer.
推荐答案
通过 JSX 嵌套或通过 React.createElement
的第三个+ 参数传递给组件的子组件在组件中显示为 this.props.children
:
The children passed to a component, either via JSX nesting or via the third+ argument to React.createElement
, shows up in the component as 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"})
)
);
}
});
示例:http://jsfiddle.net/BinaryMuse/typ1f2mf/;文档:http://facebook.github.io/react/docs/multiple-components.html#孩子
这篇关于如何使用 `React.createElement` 子参数(不带 jsx)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文