我如何在 React 经典的 \`class\` 组件中使用 React hooks？

Question

在这个例子中，我有这个反应类：

 class MyDiv extends React.component
   constructor(){
      this.state={sampleState:'hello world'}
   }
   render(){
      return <div>{this.state.sampleState}
   }
}

问题是我是否可以为此添加 React 挂钩。我知道 React-Hooks 是 React Class 风格的替代品。但是如果我想慢慢迁移到 React hooks，我可以在 Classes 中添加有用的 hooks 吗？

原文由 Aminadav Glickshtein 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在 hooks 出现之前， 高阶组件 是我们一直在做这类事情的方式。您可以为您的钩子编写一个简单的高阶组件包装器。

 function withMyHook(Component) {
  return function WrappedComponent(props) {
    const myHookValue = useMyHook();
    return <Component {...props} myHookValue={myHookValue} />;
  }
}

虽然这并不是真正直接使用类组件中的挂钩，但这至少允许您使用类组件中的挂钩 _逻辑_，而无需重构。

 class MyComponent extends React.Component {
  render(){
    const myHookValue = this.props.myHookValue;
    return <div>{myHookValue}</div>;
  }
}

export default withMyHook(MyComponent);

原文由 Joel Cox 发布，翻译遵循 CC BY-SA 4.0 许可协议