是否可以将生命周期钩子作为参数传递给 React 中的 HOC？

Question

我正在尝试创建一个包装器 HOC，我可以 select 传递哪个生命周期挂钩。我尝试了以下 HOC：

const HOC = lifeCycleHook => WrappedComponent => {
  return class OriginalComponent extends React.Component {
    lifeCycleHook
    render(){
      return (
        <WrappedComponent {...this.props} />
      );
    }
  }
}

export default HOC;

用于包装原始组件的组件：

import React from 'react';
import HOC from './helpers/hoc';
import componentDidMount from './helpers/componentDidMount';

const Home = () => <h1>Home</h1>;

export default HOC(componentDidMount)(Home);

最后是生命周期 Hook：

import React from 'react';

function componentDidMount(){
  console.log('Test')
}

export default componentDidMount;

编辑：没有抛出编译错误，但控制台日志不会触发打印 'Test'

Answer 1

recompose package can do this for you. Here's the example from the lifecycle 帮手：

const PostsList = ({ posts }) => (
  <ul>{posts.map(p => <li>{p.title}</li>)}</ul>
)

const PostsListWithData = lifecycle({
  componentDidMount() {
    fetchPosts().then(posts => {
      this.setState({ posts });
    })
  }
})(PostsList);

是否可以将生命周期钩子作为参数传递给 React 中的 HOC？

Is there a away to pass lifecycle hook as a param to a HOC in React?

reactjs

high-order-component