javascript - 如何使用 ES6 编写 ReactJS 高阶组件？

Question

我正在尝试使用 ES6 语法构建 ReactJS 高阶组件。这是我的尝试:

export const withContext = Component =>
    class AppContextComponent extends React.Component {
        render() {
            return (
                <AppContextLoader>
                     <AppContext.Consumer>
                        {context => <Component {...props} context={context} />}
                    </AppContext.Consumer>
               </AppContextLoader>
            );
        }
    };

这里，AppContextLoader 从数据库中获取上下文并将其提供给上下文，如:

class AppContextLoader extends Component {
  state = {
    user: null,
  };

  componentWillMount = () => {
    let user = databaseProvider.getUserInfo();
    this.setState({
      user: user
      });
  };


  render = () => {
    return (
      <AppContext.Provider value={this.state}>
        {this.props.children}
      </AppContext.Provider>
    );
  };
}

export default AppContextLoader;

和用法:

class App extends Component {
    static propTypes = {
         title: PropTypes.string,
         module: PropTypes.string
    }

    render = () => {
        return (
                withContext(
                <Dashboard
                    module={this.props.module}
                    title={this.props.title}
                />
                );

export default App;

出于某种原因，我的包装组件 (Dashboard) 没有获得我的 context 属性，只有原始组件(title 和 模块).

如何使用ES6语法正确编写HOC？

Answer 1

您没有正确使用 HOC，您需要传递组件而不是组件实例。同样从 render 中调用 HOC 是一个不好的模式，因为每次渲染都会返回一个新组件，你必须写

const DashboardWithContext = withContext(Dashboard);
class App extends Component {
    render = () => {
        return (
                <DashboardWithContext
                    module={"ADMIN"}
                    title={"MY APP"}
                />
        )
    }
}

export default App;

同样在 withContext HOC 中，由于返回的组件是一个类，您将访问像 {...this.props} 这样的 Prop ，而不是 {.. .props，但是使用功能组件是有意义的，因为您实际上并没有使用生命周期方法

 export const withContext = Component => (props) => (
            <AppContext.Consumer>
                {context => <Component {...props} context={context} />}
            </AppContext.Consumer>
        );

Working Codesandbox