独立成分へのデータ受け渡し

Question

これは、HomeContainerの成分、Homeの成分、そしてこのHeaderの成分です。

1. HomeContainerstate of cityと<Home city={this.props.city} />

2. Homeはステートレス機能が含まれており、JSXが含まれていますが含まれています。そうthis.propsを経由して、私はHomeContainer's city

問題にアクセスすることができます - 私は誰かが入力フィールドに何か

を入力するたびに、私はMainコンポーネントを考えて、私は、ヘッダーで街を更新できるようにHeaderにデータを送信したいです子コンポーネントにアクセスできますが、Mainコンポーネントがルート経由で呼び出されるため、これを把握することができません。

おかげ

Answer 1

あなたに似たJSXの構造を有する：cityプロパティは<Header />と<HomeContainer />の両方で使用されることになるので

<Main> 
    <Header /> 
    <HomeContainer /> 
</Main> 

を、それが定義されるべきではありませんin <HomeContainer />

cityは、代わりに<Main />状態として定義され、これはあなたがまた<Main />にchangeCity()にコールバックを定義し、小道具として<HomeContainer />にそれを渡すことを意味し、両方の<Header />と<HomeContainer />

に渡されなければなりません。

この方法で、<Header />と</HomeContainer>両方はとても簡単だったcity属性