React：別のコンポーネントからコンポーネントにアクセスする方法を教えてください。

Question

私は反応を使ってプロジェクトを進めています。私はサインアップモードとログインモーダルが別々のコンポーネントであり、サインアップモデルから切り替えることができるように各モーダルのトップを2つのリンクにしたいと考えていますログインモデルに送信します。関数を呼び出すと、別のコンポーネントからの状態を設定したり、私は1つのコンポーネント何とか両方のモデルを作成する必要がありますするコンポーネントのための方法は

open() { 
    this.setState({ showModal: true }); 
    } 

あり：各コンポーネントモデルは次のようになります機能のオープンを持っていますか？

Answer 1

コンポーネント間の通信を処理する最善の方法は、すべてのコンポーネントが「フックイン」するアプリケーション用の状態コンテナを使用することです。

ここ非常に単純な例示は次のとおり

// this state is defined somewhere in your application 
// all of your components "hook in to" this state by including 
// the values you want as props. For example, 
//  <MyFancyComponent value={state.value1} /> 
// and now MyFancyComponent has access to value1 
state = { 
    value1: 42, 
    showModal1: false, 
    showModal2: false, 
}; 


// somewhere in your application, there's a render method 
// that looks like this 
render() { 
    return (
     <div> 

      {this.props.showModal1 ? <Modal1 /> : null} 
      {this.props.showModal2 ? <Modal2 /> : null} 

      {/* now render the rest of your component */} 

     </div> 
    ); 
} 

基本的な考え方は、この成分（上記render方法を有するもの）がModal1又はModal2を表示する必要があるとき、それは、適切なフラグを変化させることであるが状態は、コンポーネントのshowModal*小道具にマップされます。その後、コンポーネントは適切なモーダルをレンダリングして表示します。他のコンポーネントからモーダルをトリガーしたい場合は、アプリケーション状態の適切なフラグを変更してください。&リアクトは再レンダリングを行い、モーダルを表示します。

上記の例は、ばかげて不完全です。基本的な考え方だけを説明することを意図しています。この作業を行うには、アプリケーションの状態コンテナを実装する必要があります。そのためには、flux patternまたはreduxのいずれかをお勧めします。

さて、あなたはコールバックをあなたが作業しているコンポーネントに固有の&プロパティのセットとしてこれを実装することができ、私はそれに対してお勧めします - それは、管理するのは非常に困難となり、を非常にすばやく。さらに、コンポーネントを追加するには、他のすべてのコンポーネントに手動でワイヤリングする必要があります。

Answer 2

これらのログインモーダルのそれぞれをレンダリングするコンポーネントでは、各コンポーネントの小道具を通じて値を渡すことをお勧めします。モーダルコンポーネントでは、渡されたプロパティの値を使用して、モーダルを表示するかどうかを決定します。

ここでは、仕事ができる方法の簡単な例です（理論的には - テストしていません）：

ログイン/新規登録モーダル

import React from 'react'; 

const LoginModal = React.createClass({ 
    propTypes: { 
    isVisible: React.PropTypes.boolean.isRequired, 
    onLogin: React.PropTypes.function, 
    }, 

    componentWillReceiveProps(nextProps) { 
    // Will allow parent components to pass in a boolean 
    // telling this component when to render 
    this.setState({ 
     showModal: nextProps.isVisible, 
    }); 
    }, 

    onSubmit() { 
    // TODO: Handle login 

    // If we let the parent handle the visibility, we just call 
    // the onLogin callback passed in and don't set this.state.showModal 
    this.props.onLogin(); 
    }, 

    render() { 
    return (
     // Use this.state.showModal boolean to show/hide 
     // your login modal 
    ); 
    }, 
}); 

export default LoginModal; 

親コンポーネント

import React from 'react'; 
import LoginModal from './LoginModal'; 

const ParentComponent = React.createClass({ 
    showLoginModal() { 
    this.setState({ 
     showLogin: true, 
    }); 
    }, 

    hideLoginModal() { 
    this.setState({ 
     showLogin: false, 
    }); 

    // TODO: Likely change the route or do something else here... 
    }, 

    render() { 
    return (
     <button onClick={this.showLoginModal}>Login</button> 

     <LoginModal isVisible={this.state.showLogin} onLogin={this.hideLoginModal} /> 
    ); 
    }, 
});