将 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>
。
我是 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>
。