通道具反應

Question

我有一個HeadingComponent其示出了H 2標籤像這樣內頁標題：

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

這HeadingComponent是具有其他組件和嵌入的div父DIV中。 ComponentThatDecidesHeading1，ComponentThatDecidesHeading2，ComponentThatDecidesHeading3是將決定應該是什麼{headingText}即

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

所以，如果ComponentThatDecidesHeading1呈現，headingText = '標題1'，如果ComponentThatDecidesHeading2被渲染的成分，headingText ='標題2'等。

有沒有辦法把一個「如果」的條件或東西，檢查哪個組件被呈現，並根據顯示相應的headingText？ 或 將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」數組中。否則，只需使用上面列出的要用其呈現的道具加載組件即可。