하위 구성 요소 변경 상위 구성 요소 상태

Question

여기에는 복제를 통해 모든 하위 개체에 handleHeaderTitle 함수를 전달하는 응용 프로그램 루트 구성 요소가 있습니다. 하위 구성 요소 내부에서이 함수는 componentWillMount() 에서 호출되며 결과적으로 루트 구성 요소는 경로를 기반으로 헤더 텍스트를 업데이트합니다.

루트 :

{ 
     this.props.children && 
        React.cloneElement(this.props.children, { 
         handleHeaderTitle: this.handleHeaderTitle 
        }) 
    } 

    handleHeaderTitle(title) { 
     this.setState({ headerTitle: title }); 
    } 

아이 :

componentWillMount() { 
    this.props.handleHeaderTitle("Profile"); 
    } 
    Profile.propTypes = { handleHeaderTitle: React.PropTypes.func }; 

상태가 여기에 부모의 자식 요소에서 설정되는 등 정말 지역이 아니므로 돌아 오는 추가이 바로 유스 케이스인가?

SET_PROFILE_HEADER 및 내부 축소 기와 같은 작업을 생성하고 결합해야한다고 생각합니다. 그러나 컨테이너 구성 요소에 하위 구성 요소가 헤더 제목을 변경했다는 사실을 알리는 방법은 여전히 ​​파악해야합니다.

Answer 1

질문에 직접 답하려면 문제를 해결하기 위해 Redux가 필요하지 않습니다. Redux는 많은 주를 유지해야하거나 주를 가깝게 조상이없는 응용 프로그램의 부분에 반영해야 할 때 도움이됩니다. 다시 말하면, 구식의 React 상태를 사용하는 것이 너무 성가시다.

React의 특정 문제에 대한보다 일반적인 접근 방식은 루트 대신 하위 구성 요소에 레이아웃을 포함하는 것입니다. 이렇게하면 자식이 부모 콘텐츠를 제어하도록하는 문제를 피할 수 있습니다. React가 의미하는 "단방향 데이터 흐름"을 보존하는 데 도움이됩니다.

class Page extends React.Component { 
    render() { 
    return (
     <div> 
     <div className='profile-header'> 
      { this.props.headerTitle } 
     </div> 
     <div className='profile-content'> 
      { this.props.children } 
     </div> 
     </div>  
    ) 
    } 
} 

class MyFirstPage extends React.Component { 
    render() { 
    return (
     <Page headerTitle='Header Title 1'> 
      <div>My content here</div> 
     </Page> 
    ) 
    } 
}