Как установить динамический компонент в дочернем компоненте в React от родительского компонента?

Question

У меня есть родительский компонент, который тянет дочерний компонент, который тянет другой дочерний компонент. Я хочу иметь возможность установить, какой дочерний компонент этого ребенка принадлежит первому родителю. Не могу понять, как это сделать. Вот код, чтобы показать, что я пытаюсь сделать:

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

Кроме того, как только я выяснить, как это сделать, как сделать, чтобы убедиться, что ребенок нуждается в правильный файл для компонента BottomChild?

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