Question

我创建了LoadBookHOC，其中包含BookDetails和BookSummary组件。

LoadBookHOC.js

const LoadBookHOC = InnerComponent => class LoadBook extends React.Component {
    constructor(){
       super();
       this.state={
          book: []
       };
    }

    set= obj => this.setState(obj);

    render(){
      return(
         <InnerComponent 
            {...this.props} 
            hocState={this.state} 
            hocSetState={this.set}
         />
      );
    }

}

BookDetails.js

this.hocSetState({book: <new data>});

BookSummary.js

this.hocSetState({book: <new data>});

每当在this.props.hocState.book或BookDetails中调用BookSummary时，我都需要获取相同的数据。我的意思是所有InnerComponent应该得到相同的更新。有没有其他方法而不是redux（用于编写大量代码）？

更新：如何使此HOC充当提供商或上下文或共享状态？哪一个适合这种情况？

Answer 1

HOC不是用于共享状态，而是用于共享功能。如果您在同一页面中有两个实例，例如：<BookDetails/>和<BookSummary/>，两者都使用相同的HOC进行增强，则会有两个book array个实例。因此，在一个组件中更新不会对其他组件可见。

对于共享状态，您应按照所述使用Redux或将状态存储在公共父组件中。

如何为HOC创建共享状态？

1 个答案: