React : Higher Order 구성 요소 : 당신은 차일드 상태가 될 수 있습니까?

Question

나는 최신 REACT (현재 React 13/ES5를 사용하고 있습니다)로 업그레이드 할 수 있도록 믹스 인을 HOC로 리팩토링하려고합니다. 구성 요소가로드되면 mixin은 경로가있는 query 속성을 가진 데이터 객체 this.data에 액세스 할 수 있습니다.

React.createClass({ 
    mixins: [myMixin], 
    data: { 
    query: "/api/foo" 
    }, 
    componentDidUpdate(): function(){ 
    } 
    ... 
} 

는 믹스 인 내부 componentDidMount, 그것은 그 경로를 쿼리 데이터를 다시 얻을 상태에 넣어 것입니다.

var myMixin = React.createClass({ 
    componentDidMount(): function(){ 
    this.fetchData(this.data.query) 
    } 
    fetchData(query) { 
    // fetch the data 
    } 
    ... 
} 

이렇게하면 내 구성 요소에서 많은 상용구를 추출합니다. 모든 구성 요소에 componentDidMount을 실행할 필요가 없습니다. data 개체 만 있으면됩니다.

나는이 믹스 인을 프로젝트 전체에 뿌렸다. 그것은 실제로 이것보다 훨씬 더 많은 일을합니다. 그러나 나는 단지 그것을 위해서 멍청이로 노력하고 있습니다.

들어 왔어. 나는 data에서 모든 것을 가져 와서 getInitialState에 넣었다. 이제 래핑 된 구성 요소의 상태에 data이 있었으므로 어떻게 액세스합니까? 믹스 인처럼 HOC에서 componentDidMount을 처리하고 data.query에 액세스하여 데이터를 가져옵니다. 나는 모든 구성 요소를 다시 작성하여 componentDidMount을 갖기를 원하지 않습니다.

PS- 일반적으로 mixin이 this.data을 수행 할 수있는 이유를 알 수 있고 내 구성 요소가 그다지 도움이되지 않는다면 필자는 React와 ES6의 최신 버전을 사용합니다. React의 최신 버전에서는 render() 외부의 객체를 정의 할 수 없습니다.

Answer 1

React는 state을 구성 요소 외부에서 변경하지 않는 것이 좋습니다. state은 구성 요소가 소유하므로 구성 요소 만 제어 할 수 있습니다. React documentation에서

:

국가는 소품과 유사하지만 개인과 완전히 구성 요소에 의해 제어됩니다.

그럼 할 수있는 일은 state 대신 props을 사용하는 것입니다. 주어진 예제에서 다음과 같이 Higher Order Component를 작성할 수 있습니다. 그러나 하위 구성 요소는 에서 state 대신 데이터를 렌더링하도록 변경해야합니다.

function HOC(WrappedComponent){ 

    return React.createClass({ 

    getInitialState: function() { 
     return { data: null }; 
    }, 

    componentDidMount: function(){ 
     this.fetchData(WrappedComponent.prototype.data.query) 
    }, 

    fetchData: function(query){ 
    // Fetching data first 
    // Then set the state with data 
    this.setState({data:data}); 
    }, 

    render: function() { 
     var props = Object.assign({}, this.props, this.state); 
     return React.createElement(WrappedComponent, props); 
    } 

    }); 

} 

var HOCChild = HOC(Child); 

PS- 나는 일반적으로 반응하고 사람이 믹스 인이 this.data을 할 수있는 이유를 말해 줄 수 있다면 ES6, 내 구성 요소가 매우 도움이 될 것입니다하지 수있는 최신 버전을 사용하십시오. React의 최신 버전에서는 과 같은 render() 외부의 객체를 정의 할 수 없습니다.

일반적으로 React Component는 ES6 클래스로 정의됩니다. ES6 클래스는 정적 또는 인스턴스 속성을 지원하지 않습니다. 하지만 계약자 내부에서 인스턴스 속성을 이와 같이 정의 할 수 있습니다.

class A{ 
    constructor(){ 
    this.foo = "foo" 
    } 
}