Question

我目前正在为应用程序编写自定义表格组件。我不希望将此组件编写为无状态组件，因为我知道它需要具有非常强大的状态。

很显然，我不能使用react-table钩子，因为这是一个高阶组件。任何想法如何实现这一目标？

import React, { Component } from 'react';
import { useTable } from 'react-table';

class Grid extends Component {
    render() {
        const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable({
            columns,
            data,
        });

        return (
           <div></div>
        )
    }
}

export default Grid

这里的错误消息是：

无效的挂钩调用。挂钩只能在功能组件的主体内部调用。

我没有在渲染中包含任何代码，因为这不是主要问题，问题在于我需要将钩子方法转换为常规HOC方案。我无法为此找到解决方法，我们将不胜感激。

Answer 1

我认为您使stateless和functional感到困惑。挂钩只能在功能组件中使用，但它们可以具有状态。功能组件可以使用useState和useReducer钩子来实现状态。

对于您的用例，您可以执行以下操作：

function Grid() {
    const [gridState, setGridState] = useState()
    const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable({
        columns,
        data,
    });

    return (
       <div></div>
    )
}

在高阶组件中使用react-table，无效的钩子调用

1 个答案: