パスの小道具は

Question

は、私のようなので、H2タグ内のページの見出しを示しHeadingComponentを持っ反応：

<div id="id1"> 
     <h2 className="class1">{headingText}</h2> 
</div> 

このHeadingComponentは、他のコンポーネントと組み込みdivを持つ親divの内側にあります。 ComponentThatDecidesHeading2がレンダリングされる場合ComponentThatDecidesHeading1、ComponentThatDecidesHeading2、ComponentThatDecidesHeading3はComponentThatDecidesHeading1がレンダリングされる場合、そう{headingText}すなわちどうあるべきか

<div id="layoutContentArea"> 
       <HeadingComponent headingText={headingText}/> 
       <div or some wrapper component> 
        <ComponentThatDecidesHeading1/> 
        OR 
        <ComponentThatDecidesHeading2/> 
        OR 
        <ComponentThatDecidesHeading3/> 
        </div> 
      </div> 

を決定する構成要素である、headingText =、 '見出し1' 、headingText = '見出し2'などとなります。

「if」条件などを表示する方法はありますか、どのコンポーネントがレンダリングされているかを確認し、その表示に基づいて対応するheadingTextを確認しますか？ または ヘッダーを渡し、から、を取得し、フェッチします。

ReactJS Two components communicating,Pass props to parent component in React.jsを確認しましたが、私の回答は得られませんでした。

アイデア？

Answer 1

render（）関数内で呼び出される関数を作成して、見出しのテキストを設定しながら、必要なコンポーネントを条件付きでレンダリングすることができます。ここでは、別の場所から別の小道具を受け取る "ComponentThatDecidesHeading"コンポーネントがあると仮定しています。その場合は、このようなものは、（EDITEDは、お問い合わせに対応するためを）うまくいく：

// Elsewhere in your app: 
 

 
const propsForMyHeadingComponents = [ 
 
{ 
 
    id: 1, 
 
    headingText: 'HeadingText 1', 
 
    data: [thing1, thing2...] 
 
}, 
 
{ 
 
    id: 2, 
 
    headingText: 'HeadingText 2', 
 
    data: [otherThing1, otherThing2, ...] 
 
}, 
 
etc... 
 
]; 
 

 
// Meanwhile, in your parent component: 
 

 
grabDataAndHeadingText(){ 
 
    let headingText; 
 
    let component; 
 

 
    // Assuming the info you need to load into your components is passed in 
 
    // from a parent or from a store like Redux: 
 
    const { propsForMyHeadingComponents } = this.props; 
 

 
    // From there, you can iterate through your array to select the data for the component you want: 
 
    propsForMyHeadingComponents.forEach(thisHeader => { 
 
    if(condition-to-determine-which-component-to-load === thisHeader.id){ 
 
     headingText = thisHeader.headingText; 
 
     data = thisHeader.data; 
 
    }); 
 
    
 
    return { data, headingText }; 
 
} 
 

 
render(){ 
 

 
    const { data, headingText } = this.grabDataAndHeadingText(); 
 

 
    // Again, assuming "ComponentThatDecidesHeading" is the same component 
 
    // with changing props: 
 

 
    return(
 
    <div id="layoutContentArea"> 
 
     <HeadingComponent headingText={ headingText }/> 
 
     <div or some wrapper component> 
 
      <ComponentThatDecidesHeading data={ data } /> 
 
     </div> 
 
    <div> 
 
); 
 
}

あなたはいつものようにも、状態に&セットheadingTextおよびコンポーネント変数を得ることができます。

文字通り独自のロジックを持つ100個のコンポーネントがそれぞれ固有のロジックなどを持つ場合、コンポーネントの名前を "propsForMyHeadingComponents"配列に格納できます。それ以外の場合は、上で概説したように、レンダリングしたい小道具でコンポーネントをロードしてください。