我尝试将 react-table 集成到我的应用程序中，但在 import { useTable } from 'react-table' 行上出现错误。

TypeError: React 未定义

错误发生在 react-table.development.js 中的 var safeUseLayoutEffect = typeof document !== 'undefined' ? React.useLayoutEffect : React.useEffect; 行上。

为什么 react 本身未定义？

import React from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'

import { useTable } from 'react-table'


export default class Taxonomies extends React.Component {

    taxonomyRows = () => {
        return data = React.useMemo(
            () => [
            {
                full_code: '1',
                level1: 'a',
                level2: 'b',
                level3: 'c',
                level4: 'd'
            },
            {
                full_code: '2',
                level1: 'e',
                level2: 'f',
                level3: 'g',
                level4: 'h'
            },
            {
                full_code: '3',
                level1: 'i',
                level2: 'j',
                level3: 'k',
                level4: 'l'
            },
            ],
            []
        )
    }

    taxonomyColumns = () => {
        return columns = React.useMemo(
          () => [
            {
              Header: 'Full Code',
              accessor: 'full_code',
            },
            {
              Header: 'Level 1',
              accessor: 'level1',
            },
            {
              Header: 'Level 2',
              accessor: 'level2',
            },
            {
              Header: 'Level 3',
              accessor: 'level3',
            },
            {
              Header: 'Level 4',
              accessor: 'level4',
            },
          ],
          []
        )
    }


    render = () => {
        const columns = this.taxonomyColumns()
        const data = this.taxonomyRows()
        const {
            getTableProps,
            getTableBodyProps,
            headerGroups,
            rows,
            prepareRow,
        } = useTable({ columns, data })

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