react-table 在数据中渲染组件

Question

我正在尝试使用 react-table 包 (https://www.npmjs.com/package/react-table#example)

在数据中添加一个组件

使用包自述文件中的示例，我尝试使用一个奇特的组件将图像添加到单元格：在代码中使用**跳出... 我也试过：

imageUrl:{<PlaceholderImage width={60} textColor="#fff" text="Image"/>}

示例：

import ReactTable from 'react-table'
import 'react-table/react-table.css'
**import { PlaceholderImage } from 'react-placeholder-image'**

render() {
  const data = [{
    name: 'Tanner Linsley',
    age: 26,
**imageUrl:<PlaceholderImage width={60} textColor="#fff" text="Image"/>,**
    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!
  }, {
    Header: ' ',
    accessor: 'imageUrl', // String-based value accessors!
    maxWidth: 70,
    minWidth:70,
  },{
    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'
  }]

  return <ReactTable
    data={data}
    columns={columns}
  />
}

Answer 1

您正在将 React 组件传递给需要字符串的数据字段。尝试通过 Cell 道具自定义您的单元格：

const columns = [
  {
    Header: "Image",
    accessor: "imageUrl",
    maxWidth: 70,
    minWidth: 70,
    Cell: props => <PlaceholderImage width={60} textColor="#fff" text="Image" />
  }
];

Answer 2

除了@Clarity 的回答之外，还有可能在 Cell 的属性级别访问单元格的值：

const columns = [
  {
    Header: "Image",
    accessor: "imageUrl",
    maxWidth: 70,
    minWidth: 70,
    Cell: ({ cell: { value } }) => (
      <img
        src={value}
        width={60}
      />
    )
  }
];

react-table 在数据中渲染组件

react-table render component inside data

reactjs

react-table