Question

让我们说我们有一个名为ThreeModule的反应组件，它可以巧妙地连续显示三个任意反应组件（或者甚至只是任意定义的dom元素）。

我们可以通过将react元素设置为状态元素并将其作为属性传递来实现，如建议in this answer：

＆＃13;

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

＆＃13;

div {
  border: solid 1px black; 
  padding: 0.2em;
}

.ThreeMod {
  display:flex; 
  flex-flow: row; 
}

＆＃13;

<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"/>

＆＃13;

这适用于我想要做的事情 - 我想知道的是 - 这是错误的做事方式吗？有没有理由（例如表演）不以这种方式做事？

Answer 1

我个人不使用这种方法，但在PropTypes documentation中存在element（“一个反应元素”）和node（“任何可以渲染的东西”）表明它是支持的功能。

有没有理由不将反应组件作为属性传递？

1 个答案: