Question

我使用NPM安装了ReactTable，然后将其导入了React应用程序。如果我不尝试使用组件，则页面工作正常，但是，一旦尝试使用它，我就会从标题中得到错误消息。

这是我目前拥有的代码。

import ReactTable from 'react-table'
import 'react-table/react-table.css'

const data = [{
    name: 'Tanner Linsley',
    age: 26,
    friend: {
      name: 'Jason Maurer',
      age: 23,
    }
  }]

  const columns = [{
    Header: 'Name',
    accessor: 'name' // String-based value accessors!
  }, {
    Header: 'Age',
    accessor: 'age',
    Cell: props => <span className='number'>{props.value}</span> // Custom cell components!
  }, {
    id: 'friendName', // Required because our accessor is not a string
    Header: 'Friend Name',
    accessor: d => d.friend.name // Custom value accessors!
  }, {
    Header: props => <span>Friend Age</span>, // Custom header components!
    accessor: 'friend.age'
  }]

const VariableTable = ({ readOnly, correct, incorrect, active, variables, steps, create, update, onActiveChange }) => console.log(data) || (
  <div className="VariableTable card">

/* Some other HTML and JSX in here */

    <ReactTable data={data} columns={columns}/>
  </div>
)

基本上是他们在此处提供的演示：https://www.npmjs.com/package/react-table#columns

它也可以编译。

我应该在React项目中更改其他文件吗？

谢谢。

Answer 1

我认为您可能缺少了一些东西，我为您创建了Sandbox

希望有帮助

Answer 2

类似于您安装ReactTable V7的声音，但是具有与V6兼容的代码（显然与V7完全不同）。还要注意，截至昨天为止，react-table的默认安装为版本7-beta，因此，如果要使用V6，则需要锁定一个版本。

供您参考：

https://github.com/tannerlinsley/react-table/issues/1556

https://github.com/tannerlinsley/react-table/issues/1686

无法使用ReactTable读取未定义的属性“切片”

2 个答案: