ES5 믹스를 고차원 컴포넌트로 변환

내 프로젝트에서 모든 믹스 인을 없애고 HOC로 대체하려고합니다. 나는 지금 ES5를 사용하여 붙어있다.ES5 믹스를 고차원 컴포넌트로 변환

export default React.createClass({ 
    mixins: [SomeAsyncMixin], 
    data: { 
    item1: { 
     params: ({params, query}) => { 
     params: ({params, query}) => { 
      if (!query.p) { 
       return null; 
      } 
      const status = someTernaryResult 
      return { 
       groups: query.groups, 
       status, 
       subject: params.subject, 
      }; 
     }, 
     promise: query => query && query.subject && api(makeUrl(`/some/endpoint`, query)) 
     }, 

    item2: { 
     params: ({params, query}) => { 
      //same as before 
     }, 
     promise: ({subject, query}) => 
      // same as before 
    } 

    render() { 
     // some stuff 

     return(
     // some jsx 
    ); 
    } 
}

는 믹스 인, 내부에 그것이 componentWillMountdata 및 각 키를 통해 루프 소품/상태를 업데이트 할 것이다 update 함수를 실행 componentWillUpdate있다.

믹스 인을 제거하는 방법에 대한 정보는 docs인데, 믹스 인은 해당 구성 요소가 아니라 데이터를 보유합니다.

내 프로젝트에는 data 개체를 가진 많은 구성 요소가 있으며이 mixin을 사용하여 소품/상태를 업데이트합니다. 이 데이터 객체를 처리하기 위해 재사용 가능한 구성 요소를 만들려면 어떻게해야합니까?

또한 구성 요소 내에서이 데이터 개체에 어떻게 액세스합니까? 구성 요소 this.data에서 null입니다. 믹스 인 this.data 내부는 구성 요소 내부의 데이터 객체입니다. 왜?

출처

2017-04-01 user2465134

상위 구성 요소와 mixin이 매우 유사하게 보입니다. 주요 차이점은 data, 소품 및 상태가 공유/전달되는 방법입니다. mixin의 경우 mixin의 동작을 사용하여 구성 요소의 정의를 변경하므로 상태와 소품이 모두 하나의 구성 요소에 포함됩니다.

상위 구성 요소의 경우 다른 구성 요소를 감싸는 새 구성 요소를 만듭니다. 따라서 공유 상태/동작은 래핑 구성 요소 내에 완전히 포함되며 래핑 된 구성 요소 내에서 사용해야하는 모든 데이터는 소품을 통해 전달 될 수 있습니다. 다음

const someAsync = (data) => (WrappedComponent) => { 
    class SomeAsyncComponent extends React.Component { 
     constructor(...args) { 
      super(...args) 

      this.state = { 
       ... 
      } 
     } 

     componentWillMount() { 
      // Make use of data, props, state, etc 
      ... 
     } 

     componentWillUpdate() { 
      ... 
     } 

     render() { 
      // May filter out some props/state, depending on what is needed 
      // Can also pass data through if the WrappedComponent needs it. 
      return (
       <WrappedComponent 
        { ...this.props } 
        { ...this.state } 
       /> 
      ) 
     } 
    } 

    return SomeAsyncComponent 
}

그리고 그것의 사용량

export default someAsync(dataConfig)(WrappedComponent)

같은

그래서 당신은 당신의 예제에있는 것과, 당신의 고차 구성 요소가 될 것이다 뭔가

출처

2017-04-03 05:00:45 TLadd

ES5 믹스를 고차원 컴포넌트로 변환

답변

관련 문제