React-Table useTable is not defined (no Node.js)

Question

我正在构建一个没有 Node.js 的 React 应用程序（即，将所有 JS 提取为 unpkg 脚本标签并运行在浏览器中本地化它）并且正在使用 react-table。但是，在使用 demo:

中的代码片段时，我不断收到此错误

function Table({columns, data}) {
    // Use the state and functions returned from useTable to build your UI
    const {
        getTableProps,
        getTableBodyProps,
        headerGroups,
        rows,
        prepareRow,
    } = useTable({
        columns,
        data,
    })
...

Uncaught ReferenceError: useTable is not defined

我的 JS 文件是：

<script type="application/javascript" src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script crossorigin src="//unpkg.com/react-is/umd/react-is.production.min.js"></script>
<script crossorigin src="https://unpkg.com/styled-components/dist/styled-components.min.js"></script>
<script src="https://unpkg.com/react-table@7.7.0/dist/react-table.development.js" crossorigin></script>

我 read 这个问题已通过 react-table 版本 7.7.0 解决，但这正是我正在使用的版本。

编辑：我正在尝试的演示中的完整代码运行:

App.js:

function App() {
   const data = React.useMemo(
     () => [
       {
         col1: 'Hello',
         col2: 'World',
       },
       {
         col1: 'react-table',
         col2: 'rocks',
       },
       {
         col1: 'whatever',
         col2: 'you want',
       },
     ],
     []
   )
 
   const columns = React.useMemo(
     () => [
       {
         Header: 'Column 1',
         accessor: 'col1', // accessor is the "key" in the data
       },
       {
         Header: 'Column 2',
         accessor: 'col2',
       },
     ],
     []
   )
 
   const {
     getTableProps,
     getTableBodyProps,
     headerGroups,
     rows,
     prepareRow,
   } = useTable({ columns, data })
 
   return (
     <table {...getTableProps()} style={{ border: 'solid 1px blue' }}>
       <thead>
         {headerGroups.map(headerGroup => (
           <tr {...headerGroup.getHeaderGroupProps()}>
             {headerGroup.headers.map(column => (
               <th
                 {...column.getHeaderProps()}
                 style={{
                   borderBottom: 'solid 3px red',
                   background: 'aliceblue',
                   color: 'black',
                   fontWeight: 'bold',
                 }}
               >
                 {column.render('Header')}
               </th>
             ))}
           </tr>
         ))}
       </thead>
       <tbody {...getTableBodyProps()}>
         {rows.map(row => {
           prepareRow(row)
           return (
             <tr {...row.getRowProps()}>
               {row.cells.map(cell => {
                 return (
                   <td
                     {...cell.getCellProps()}
                     style={{
                       padding: '10px',
                       border: 'solid 1px gray',
                       background: 'papayawhip',
                     }}
                   >
                     {cell.render('Cell')}
                   </td>
                 )
               })}
             </tr>
           )
         })}
       </tbody>
     </table>
   )
 }

Index.js:

ReactDOM.render(<App />, document.getElementById('root'))

makeData.js:

const range = len => {
  const arr = []
  for (let i = 0; i < len; i++) {
    arr.push(i)
  }
  return arr
}

const newPerson = () => {
  const statusChance = Math.random()
  return {
    firstName: "Scott",
    lastName: "H",
    age: Math.floor(Math.random() * 30),
    visits: Math.floor(Math.random() * 100),
    progress: Math.floor(Math.random() * 100),
    status:
      statusChance > 0.66
        ? 'relationship'
        : statusChance > 0.33
        ? 'complicated'
        : 'single',
  }
}

function makeData(...lens) {
  const makeDataLevel = (depth = 0) => {
    const len = lens[depth]
    return range(len).map(d => {
      return {
        ...newPerson(),
        subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined,
      }
    })
  }

  return makeDataLevel()
}

index.html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>React Local</title>
    <script type="application/javascript" src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script crossorigin src="//unpkg.com/react-is/umd/react-is.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/styled-components/dist/styled-components.min.js"></script>
    <link rel="stylesheet" src="https://unpkg.com/react-table@7.7.0/react-table.css" crossorigin>
    <script src="https://unpkg.com/react-table@7.7.0/dist/react-table.development.js" crossorigin></script>
</head>

<body>
<div id="root"></div>

<script type="text/babel" src="makeData.js"></script>
<script type="text/babel" src="app.js'"></script>
<script type="text/babel" src="index.js'"></script>

</body>

</html>

Answer 1

感谢 DrewReese，当通过来自 unpkg CDN 的脚本标签使用 react-table 时，useTable 必须被引用为 window.ReactTable.useTable：

function Table({columns, data}) {
    // Use the state and functions returned from useTable to build your UI
    const {
        getTableProps,
        getTableBodyProps,
        headerGroups,
        rows,
        prepareRow,
    } = window.ReactTable.useTable({
        columns,
        data,
    })
...

React-Table useTable is not defined (no Node.js)

React-Table useTable is not defined (no Node.js)

javascript

reactjs

react-table