有什么理由不将react组件作为属性传递吗？

Question

假设我们有一个名为ThreeModule的react组件，它非常聪明地在一行中显示了三个Arbityle react组件（甚至只是任意定义的dom元素）。

我们可以通过将react元素设置为状态元素并将它们作为属性传入来实现这一点，如下面的答案所建议的：

class ModA extends React.Component{
  render () {
    return <div> this is ModA</div>
  }
}

class ModB extends React.Component{
  render () {
    return <div> this is ModB</div>
  }
}
class ModC extends React.Component{
  render () {
    return <div> this is ModC</div>
  }
}

class ThreeMod extends React.Component{

  render() {
  return (<div className = "ThreeMod"> 
    This is ThreeMod
    <div className ="left">   
      {this.props.moda}
    </div> 

    <div  className ="middle"> 
     {this.props.modb}
    </div> 

    <div  className ="right"> 
      {this.props.modc}
    </div> 

  </div> ); 

  }
}

class App extends React.Component {


  constructor() {

    super(); 
    this.state = {
      moda: <ModA/> ,
      modb: <ModB/> ,
      modc: <ModC/> 
    }
  }

  render() {
    function getRandomMod() {
      let rand =Math.floor(Math.random() * Math.floor(4));
      switch (rand) {
        case 0 : return <ModA/> 
        case 1: return <ModB/> 
        case 2: return <ModC/> 
        default: return "random text"; 
      }        
    }

    return (
      <div className="App">
        This is App

        <button onClick = {() => {
          this.setState({moda: getRandomMod() }
          )}}>randomise left </button> 

        <button onClick = {() => {
          this.setState({modb: getRandomMod() }
        )}}>randomise middle  </button> 

        <button onClick = {() => {
          this.setState({modc: getRandomMod() }
        )}}>randomise right</button> 

        <ThreeMod
          moda={this.state.moda}
          modb={this.state.modb}
          modc={this.state.modc}
          /> 
      </div>
    );
  }
}

ReactDOM.render(<App />,   document.body
);

div {
  border: solid 1px black; 
  padding: 0.2em;
}

.ThreeMod {
  display:flex; 
  flex-flow: row; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>


<div id = "react"/> 

这恰恰适用于我想做的事情--我想知道的是--这是不是做事情的错误方式？有没有理由（如表现）不这样做事？

Answer 1

我个人不使用这种方法，但是PropTypes文档中元素（“一个React元素”）和节点（“任何可以呈现的内容”）的存在表明它具有受支持的功能。