Question

我对反应世界很陌生，我试图通过this.props.children将包含component作为React.cloneElement。我正在尝试这样，以便我可以使用ref来引用该组件。

例如，假设我按照以下方式将孩子送到const，

const Child = React.cloneElement(this.props.children, this.props);

并尝试渲染它，

    return (
      <div style={styles.container}>
        <Child ref={'child'}/>
      </div>
    );

但这引发了这个错误：warning.js?0260:45 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of 'OnlineOrderPane'.

如果你们中的任何一位专家指出我正确的方向来实现这一点，或者实际上是否可行，那将是非常有帮助的。

非常感谢。

Answer 1

React.cloneElement只占用一个元素，但this.props.children是元素的集合（无论您是否只发送一个子元素）。

因此，为了克隆这些元素，你必须迭代它们

Imports System.Configuration

此代码将填充this.refs，以便对于每个子元素，您可以通过索引访问它的ref，例如<appSettings>，{React.Children.map(this.props.children, (element, idx) => { return React.cloneElement(element, { ref: idx }); })}等...请参阅下面的示例A.

如果您只想要一个元素并且只想克隆该元素，那么只需从this.refs[0]集合中获取第一个元素即可。但请注意，它不是一个简单的数组，因此您必须使用React辅助方法：React.Children.only。

然后只需克隆元素并传递您想要使用的任何参考：

this.refs[1]

另见例B.

示例A（小提琴here）

this.props.children

示例B（小提琴here）

var onlyChild = React.Children.only(this.props.children);
var clone = React.cloneElement(onlyChild, { ref: "test" });

这两个示例都假设页面上有一个简单的var P = React.createClass({ render: function() { return <div>Parent<br/> {React.Children.map(this.props.children, (element, idx) => { return React.cloneElement(element, { ref: idx }); })} </div>; }, componentDidMount: function(prevProps, prevState) { ReactDOM.findDOMNode(this.refs[0]).style.backgroundColor="green"; ReactDOM.findDOMNode(this.refs[1]).style.backgroundColor="blue"; ReactDOM.findDOMNode(this.refs[2]).style.backgroundColor="red"; } }); var C = React.createClass({ render: function() { return <div>{this.props.text}</div>; } }); ReactDOM.render( <P> <C text="a"/> <C text="b"/> <C text="c"/> </P>, document.getElementById('container') );。

将this.props.children作为jsx中的一个组件包含在内

1 个答案: