反応成分間のコミュニケーション

Question

私は反応が新しく、これは私が知らないものです。アプリケーションでは、それを使用して私は の他のコンポーネントが読み込まれる主要なコンポーネントがあります。このよう

、

render() { 
    return (
     <div className="index"> 
     <HeaderComponent /> 
     <MainHeroComponent /> 
     <AboutComponent /> 
     </div> 
    ); 
    } 

そして、私は誰かについてのコンポーネントを表示するHeaderComponent内のリンクをクリックしたときにします。 MainHeroComponentを非表示にします。どのように私はReactのコンポーネント間でそのような通信を行うことができますか？それは可能でしょうか？

おかげで、このシナリオの代わりに、コンポーネント間の直接通信のための

Answer 1

使用React-Routerと作成routes。 https://github.com/reactjs/react-router/blob/master/docs/guides/RouteConfiguration.md

Answer 2

アーディティヤの答えは、おそらくより良い解決策ですが、あなたが本当にそれにあなたの方法をしたい場合、あなたは状態とコールバックを使用することができますルータの詳細については使用してサンプル・アプリケーションの構造と反応-ルータ

const App = React.createClass({ 
    render() { 
    return (
     <div> 
     <h1>App</h1> 
     <HeaderComponent /> 
     </div> 
    ) 
    } 
}) 

render((
    <Router> 
    <Route path="/" component={App}> 
     <Route path="hero" component={MainHeroComponent} /> 
     <Route path="about" component={AboutComponent} /> 
    </Route> 
    </Router> 
), document.body) 

を参照してください。 。

class Index extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     showHero: true 
    }; 
    this.toggleShowHero = this.toggleShowHero.bind(this); 
    } 
    toggleShowHero() { 
    this.setState({ 
     showHero: !this.state.showHero 
    }); 
    } 
    render() { 
    return (
     <div className="index"> 
     <HeaderComponent onClick={toggleShowHero}/> 
     { 
      this.state.showHero ? 
      <MainHeroComponent /> : 
      <AboutComponent /> 
     } 
     </div> 
    ); 
} 

Answer 3

が反応-ルータやReduxのを含め、あなたがこれを達成することができ、さまざまな方法、ありますが、あなたが反応するように新しいしているので、あなたが最初の基本に慣れる場合、それは良いでしょう。まず、メインコンポーネントの状態を変更して、どの子コンポーネントをレンダリングするかを決定する必要があります。主成分コードで

あなたが投稿スニペット、次のようにコンストラクタで状態を初期化します。そして、

/* in the main component */ 
constructor(props) { 
    super(props); 
    this.state = { 
    showAbout: true 
    }; 
} 

次のようにダウンあなたのヘッダーに、あなたの主なコンポーネントへの参照を渡すために、レンダリング機能を変更しますコンポーネント：

/* in the main component */ 
<HeaderComponent mainComponent={this}/> 

次に、HeaderComponentで、操作を実行するリンクにclickイベントハンドラをアタッチします。

/* in HeaderComponent */ 
showAbout() { 
    let mainComponent = this.props.mainComponent; 
    mainComponent.setState({ 
    showAbout: true 
)}; 
} 

を最後にバック主成分のレンダリング機能では、：：次のように同じコンポーネントで

/* in HeaderComponent */ 
<a href="#" ....... onClick={this.showAbout.bind(this)}>Show About</a> 

は、showAbout関数を定義

/* in the main component */ 
render() { 
    let mainHeroComponent, aboutComponent; 
    if (this.state.showAbout) { 
    aboutComponent = (
     <AboutComponent/> 
    ); 
    } else { 
    mainHeroComponent = (
     <MainHeroComponent/> 
    ); 
    } 

    return (
    <div className="index"> 
     <HeaderComponent mainComponent={this}/> 
     {mainHeroComponent} 
     {aboutComponent} 
    </div> 
); 
} 

すれば完了です！基本的に、コンポーネントは状態が変更されるたびに再レンダリングされます。したがって、リンクをクリックするたびに、メインコンポーネントの状態が新しい値で変更され、showAboutとなります。これにより、メインコンポーネントが再レンダリングされ、の値に基づいてshowAboutがMainHeroComponentまたはAboutComponentをレンダリングするかどうかが決定されます。

しかし、AboutComponentの代わりにMainHeroComponentを同様に表示して、ビューを切り替えるだけのロジックがあることを確認する必要があります。