反応成分をプロパティとして渡さない理由はありますか？

debugcn 投稿 Dev

dwjohnston

と呼ばれるreactコンポーネントがあるとしましょう。これは、ThreeModule3つの任意の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"/>

これは、私がやりたいこと、つまり私が疑問に思っていることに対して正確に機能します。これは、物事を行うための間違った方法ですか？このようにしない理由（パフォーマンスなど）はありますか？

フェルゲレス

私は個人的にこのアプローチを使用していませんが、PropTypesドキュメントにelement（ "React要素"）とnode（ "レンダリングできるもの"）が存在することは、サポートされている機能であることを示しています。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]