我有一个父组件,它拉入一个子组件,该子组件又拉入另一个子组件。我希望能够设置该 child 的子组件来自顶级父级。不知道该怎么做。这是一些代码来演示我想要做什么:
var TopParent = React.createClass({
render: function() {
return (
<div className="topParent">
<Child componentVariable="BottomChild">
</div>
);
}
});
var Child = React.createClass({
render: function() {
return (
<div className="child">
<{this.props.componentVariable} /> // this should pull in a component based on what is passed from TopParent
</div>
);
}
});
var BottomChild = React.createClass({
render: function() {
return (
<div className="bottomChild">
I am the bottom child. I should be able to be swapped out from TopParent.
</div>
);
}
});
此外,一旦我弄清楚如何执行此操作,如何确保 Child 需要 BottomChild 组件的正确文件?
最佳答案
只需使用实际引用,而不是字符串;毕竟,当您渲染像 <Child />
这样的组件时手动,它也是一个引用。
var TopParent = React.createClass({
render: function() {
return (
<div className="topParent">
<Child componentVariable={BottomChild} />
</div>
);
}
});
var Child = React.createClass({
render: function() {
var Component = this.props.componentVariable; // make sure the var is capitalized
return (
<div className="child">
<Component />
</div>
);
}
});
var BottomChild = React.createClass({
render: function() {
return (
<div className="bottomChild">
I am the bottom child. I should be able to be swapped out from TopParent.
</div>
);
}
});
但是,在许多情况下,允许组件 to completely control the contents of the child 是有意义的:
var TopParent = React.createClass({
render: function() {
return (
<div className="topParent">
<Child>
<BottomChild />
</Child>
</div>
);
}
});
var Child = React.createClass({
render: function() {
// `this.props.children` is the *contents* of the `Child` component
// as specified in the JSX of `TopParent`
return (
<div className="child">
{this.props.children}
</div>
);
}
});
var BottomChild = React.createClass({
render: function() {
return (
<div className="bottomChild">
I am the bottom child. I should be able to be swapped out from TopParent.
</div>
);
}
});
关于javascript - 如何从父组件在React中的子组件中设置动态组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33113261/