如何使用`React.createElement`子参数(没有jsx)

2024-02-23

React.createElement采用展开的“children”参数

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

我确信这有一个非常非常简单的答案。


子级传递给组件,通过 JSX 嵌套或通过第三个+参数React.createElement,在组件中显示为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://jsfiddle.net/BinaryMuse/typ1f2mf/; docs: http://facebook.github.io/react/docs/multiple-components.html#children http://facebook.github.io/react/docs/multiple-components.html#children

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用`React.createElement`子参数(没有jsx) 的相关文章

随机推荐