如何使用jsx子参数(不带`React.createElement` )
如何使用jsx子参数(不带`React.createElement` )
提问于 2015-05-12 23:46:50
React.createElement接受一个扩展的“孩子”参数
var d = React.DOM;
React.createElement(LabeledElement, {label: "Foo"},
d.input({value: "foo"})
)但是我找不到任何关于如何实际使用它的文档
var LabeledElement = React.createClass({
render: function() {
return d.label({}
,d.span({classNames: 'label'}, this.props.label)
, //How to place children here?
}
})我相信这有一个非常非常简单的答案。
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-05-13 00:06:26
通过JSX嵌套或通过React.createElement的third+参数传递给组件的子项在组件中显示为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#children
Stack Overflow用户
发布于 2021-12-17 07:25:32
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
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"})
)
);
}
});
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30195720
复制相关文章
相似问题