통과 소품

Question

내가 좋아 그래서 H2 태그 안에 페이지 제목을 나타내는 HeadingComponent이 반응 :

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

이 HeadingComponent 다른 구성 요소 및 임베디드 된 div 갖는 부모 DIV 안쪽 . ComponentThatDecidesHeading1는 ComponentThatDecidesHeading2, ComponentThatDecidesHeading3 즉이

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

그래서 ComponentThatDecidesHeading1가 렌더링되는 경우, headingText은 = '제목 1'ComponentThatDecidesHeading2가 렌더링되는 경우 {headingText}해야할지 결정합니다 구성 요소 , headingText = '제목 2'등.

"if"조건 또는 어떤 구성 요소가 렌더링되는지 확인하고 해당 표시를 기반으로 해당하는 headingText를 넣을 수있는 방법이 있습니까? 또는 heading 텍스트를에서 가져오고, 가져오고, 가져옵니다.

ReactJS Two components communicating, Pass props to parent component in React.js을 확인했지만 내 대답을 얻지 못했습니다.

아이디어가 있으십니까?

Answer 1

render() 함수 내에서 호출되는 함수를 만들어 원하는 구성 요소를 조건부로 렌더링하고 제목 텍스트를 설정할 수 있습니다. 여기 다른 곳에서 다른 소품을받는 "ComponentThatDecidesHeading"구성 요소가 있다고 가정합니다. 그런 경우,이 같은 일이 (가 귀하의 질문에 응답 할 편집) 일 것이다 :

// 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"배열에 구성 요소의 이름을 저장할 수 있습니다. 그렇지 않으면 위에 설명 된대로 렌더링하려는 소품이있는 구성 요소를로드하면됩니다.