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

Question

I have a parent component that pulls in a child component, that pulls in another child component. I want to be able to set what that child's child component is from the top parent. Cannot figure out how to do that. Here is some code to demonstrate what I am trying to do:

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

Additionally, once I figure out how to do this, how do I make sure that Child requires the correct file for the BottomChild component?

Answer 1

Just use actual references, instead of strings; after all, when you render a component like <Child /> manually, it's a reference, too.

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

However, in many cases, it makes sense to allow the component 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>
        );
    }
});