将 this.props.children 作为组件包含在 jsx 中

Include this.props.children as a component within the jsx

我是 React 世界的新手,我正在尝试通过 React.cloneElement 将 include this.props.children 作为 component。我正在尝试这样做,以便我可以使用 ref.

引用该组件

例如,假设我按如下方式将 children 转换为 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'.

如果你们中的任何专家能指出我实现这一目标的正确方向,或者如果这样做确实可行,那将对我有很大帮助。

非常感谢。

React.cloneElement只取一个元素,而this.props.children是一个元素的集合(不管你只送一个child)。

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

{React.Children.map(this.props.children, (element, idx) => {
    return React.cloneElement(element, { ref: idx });
})}

此代码将填充 this.refs,以便对于每个 child 元素,您都可以通过索引访问它的引用,例如this.refs[0]this.refs[1] 等...请参见下面的示例 A。

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

然后只需克隆该元素并传递您想要使用的任何引用:

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

另见示例 B。

示例 A (Fiddle here)

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')
);

示例 B (Fiddle here)

var P = React.createClass({
  render: function() {
    var onlyChild = React.Children.only(this.props.children);
    var clone = React.cloneElement(onlyChild, { ref: "test" });
    return <div>Parent<br/>
        {clone}
    </div>;
  },

  componentDidMount: function(prevProps, prevState) {
    ReactDOM.findDOMNode(this.refs["test"]).style.backgroundColor="green";
  }
});

var C = React.createClass({
  render: function() {
    return <div>{this.props.text}</div>;
  }
});

ReactDOM.render(
  <P>
  <C text="a"/>
  </P>,
  document.getElementById('container')
);

这两个示例都假设页面上有一个简单的 <div id='container'></div>