如何从父组件在 React 的子组件中设置动态组件？答案

【问题标题】：How to set a dynamic component within a child component in React from the parent component?如何从父组件在 React 的子组件中设置动态组件？
【发布时间】：2015-10-13 21:50:24
【问题描述】：

我有一个拉入子组件的父组件，该子组件拉入另一个子组件。我希望能够设置该孩子的子组件来自顶级父级。无法弄清楚如何做到这一点。这是一些代码来演示我正在尝试做的事情：

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 组件的正确文件？

【问题讨论】：

为什么不将您的 BottomChild 呈现在您的父母中作为您孩子的孩子？并通过“this.props.children”将其包含在您的孩子中？这样，您的父母需要知道要渲染哪个 BottomChild，但您的中间孩子不一定需要知道。而直接子级不需要它。

标签： javascript node.js reactjs react-native react-jsx

【解决方案1】：

只需使用实际引用，而不是字符串；毕竟，当您手动渲染像 <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>
        );
    }
});

【讨论】：