React 형제 간 통신 및 렌더링

Question

react/redux 응용 프로그램에는 두 개의 자식 구성 요소 인 헤더와 내용 부분을 렌더링하는 컨테이너 구성 요소가 있습니다. 내 문제는 헤더가 컨테이너의 제목을 렌더링해야한다는 것입니다. 그러나이 제목은 실제로 내용 부분에 의해 정의됩니다. 컨테이너의 렌더링 방법은 다음과 같습니다

render() { 
    return (
     <div className='Container'> 
      <ContainerHeader /> 
      <div className='ContainerContent'> 
       {this.renderContent()} 
      </div> 
     </div> 
    ); 
} 

renderContent 방법은 컨테이너의 상태에 따라 다른 구성 요소를 렌더링하고 각 구성 요소는 컨테이너의 제목처럼 보이게하는 방법을 논리를 정의합니다. 예 : 특정 항목을 렌더링하는 내용은 항목의 이름을 컨테이너 제목에 넣어야합니다.

어쩌면 나는이 문제를 일으키는 오해가있을 수 있습니다. 나의 기본적인 아이디어는 컨테이너가 헤더와 컨텐트로 구조화되었으므로이 두 가지 구성 요소를 만들었다. 그러나 제목 정의는 내용에 따라 다르며 제목 렌더링은 머리글에서 수행됩니다.

어떻게 달성 될 수 있습니까? 어쩌면 React refs를 사용할 것인가? 아니면 여기서 계층 구조 개념을 변경해야합니까?

Answer 1

아마도 이것을 refs로 어떻게 달성 할 수 있을지 모른다. 그러나보다 깨끗한 방법을 사용하고 제목을 알아 내면 this.renderContent으로 렌더링하는 것이 좋습니다. 이 같은

그래서 대략 뭔가 :

render() { 
    const title = this.getTitle(); 
    return (
     <div className='Container'> 
      <ContainerHeader title={title} /> 
      <div className='ContainerContent'> 
       {this.renderContent(title)} 
      </div> 
     </div> 
    ); 
} 

그것은 다음과 같이 어떤 제목이 getTitle 같은 기능으로 레벨을 렌더링해야 결정 논리를 추출하기 위해 귀하의 경우 수 있습니까?