如何在React的父组件中设置子组件中的动态组件

How to set a dynamic component within a child component in React from the parent component?

本文关键字：组件 动态 设置 React      更新时间：2023-09-26

我有一个父组件，它拉入一个子组件，该子组件拉入另一个子组件。我希望能够从顶层父组件设置该子组件的子组件是什么。我不知道该怎么做。下面是一些代码来演示我要做的事情:

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>
        );
    }
});
然而，在许多情况下，允许组件完全控制子组件的内容是有意义的: 
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>
        );
    }
});
相关文章：