子がどのレンダリングする必要があるかを子に送信する - 反応するj

Question

<input>の<div>と、より詳細なズームのために特定の入力divをレンダリングする必要があるonClickイベントをonClickイベントにするが、このモーダルを使用している数字パッドをレンダリングするためのウィンドウ。

レンダリングするコンポーネントを区別する方法はありますか？特定のコンポーネントをモーダルコンポーネント（子）に送信してからこのコンポーネントをレンダリングする可能性はありますか？

{React.cloneElement(this.props.children, { ...others})} 

<Modal child={Numpad} update={this.editValue.bind(this)}/> 

、その後、モーダル（子）で

<Modal update={this.editValue.bind(this)}>{Numpad}</Modal> 

または

を、それは無効な要素の型エラーを投げ、動作しません - 私はこのような何かを試してみました。私はちょうどスイッチを使用することができますが、どのコンポーネントをprops.typeでレンダリングするのかを区別するためにModalのレンダリングコンポーネントがありますが、より簡単な方法、ヒントが必要ですか？

Answer 1

あなたが正しく理解している限り、現在アクティブなタブに応じて異なるコンテンツを表示できるように、モーダルウィンドウ内にタブ付きインターフェイスを作成しようとします。私はその問題のために次の解決策を見ることができます。

まず、我々はModalコンポーネントとそのコンテンツを保持する基本的なコンポーネントを作成：上記（div）それぞれの子

class App extends React.Component { 
    render() { 
    return (
     <Modal> 
     <div>The content of the first tab</div> 
     <div>The content of the second tab</div> 
     <div>The content of the third tab</div> 
     </Modal> 
    ); 
    } 
} 

をコンポーネントはModal内の各タブの内容を表しています。

今度はModalコンポーネント自体を作成してみましょう：

class Modal extends React.Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     tabIndex: 0 
    }; 
    } 

    switchTabs(tabIndex) { 
    this.setState({ 
     tabIndex 
    }); 
    } 

    render() { 
    return (
     <div> 
     <button onClick={this.switchTabs.bind(this, 0)}>1</button> 
     <button onClick={this.switchTabs.bind(this, 1)}>2</button> 
     <button onClick={this.switchTabs.bind(this, 2)}>3</button> 
     <div> 
      {React.Children.map(this.props.children, (child, index) => 
      index === this.state.tabIndex && child 
     )} 
     </div> 
     </div> 
    ) 
    } 
} 

私たちは、コンポーネントのローカル状態の一部として、アクティブなタブ（tabIndex）のインデックスを保持します。これらのタブを切り替える3つのボタンも表示されます。

最後に、React.Children.mapを使用してコンポーネントの子を反復処理し、indexが現在のtabIndexに対応する子を表示します。

次のスニペットを試してください。条件に基づいて、2つのモーダルと表示/非表示を使用しないのはなぜ

class Modal extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 

 
    this.state = { 
 
     tabIndex: 0 
 
    }; 
 
    } 
 
    
 
    switchTabs(tabIndex) { 
 
    this.setState({ 
 
     tabIndex 
 
    }); 
 
    } 
 

 
    render() { 
 
    return (
 
     <div> 
 
     <button onClick={this.switchTabs.bind(this, 0)}>1</button> 
 
     <button onClick={this.switchTabs.bind(this, 1)}>2</button> 
 
     <button onClick={this.switchTabs.bind(this, 2)}>3</button> 
 
     <div> 
 
      {React.Children.map(this.props.children, (child, index) => 
 
      index === this.state.tabIndex && child 
 
     )} 
 
     </div> 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
class App extends React.Component { 
 
    render() { 
 
    return (
 
     <Modal> 
 
     <div> 
 
      <img src="https://avatars2.githubusercontent.com/u/4226954?v=3&s=400" height="200" /> 
 
     </div> 
 
     <div style={{ height: '200px', width: '200px', marginTop: '5px' }}>The second tab</div> 
 
     <div> 
 
      <img src="https://avatars3.githubusercontent.com/u/810671?v=3&s=400" height="200" /> 
 
     </div> 
 
     </Modal> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<App />, document.getElementById('app'));

<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="app"></div>