通道具反应

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”数组中。否则，只需使用上面列出的要用其呈现的道具加载组件即可。