在类组件内调用 React 自定义钩子

Question

我可以看到很多线程解释如何使用高阶组件在类组件内使用自定义挂钩，在这种情况下，我们在类组件内使用 Hooks 输出值。

在使用 HOC 时，有什么方法可以调用类组件内部的钩子吗？因为有时钩子会接受一些参数。该函数的参数基于类组件的状态

访问类组件内的钩子值

import React from 'react';
import { withSampleHookHoc } from './withSampleHookHoc';
    
class SampleClassComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
          name: 'Guest',
        };
    }
    render() {
        return <h1> Sample Class Component - {this.props.name} </h1>;
    }
}
    
export default withSampleHookHoc(SampleClassComponent);

但我想要的是将状态值作为参数传递给钩子并从类组件调用它

import React from 'react';
import { withSampleHookHoc } from './withSampleHookHoc';

class SampleClassComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
          text: 'Guest',
        };
    }
    render() {
        return <h1> Sample Class Component - {this.props.name(this.state.text)} </h1>;
    }
}
    
export default withSampleHookHoc(SampleClassComponent);

代码网址

Answer 1

是的，你当然可以。Stackblitz 示例如下：https://stackblitz.com/edit/react-bgum6q ?file=src/Components/SampleClassComponent.js 。编辑输入，然后单击Update name按钮查看其是否有效。

本质上，您只需从钩子中返回一些函数，该函数将通过 HOC 作为 prop 传递给类组件。然后，您可以在类组件中访问此函数，并且可以执行您喜欢的任何操作。

如果您有任何疑问，只需对此答案添加评论即可。