反应表呈现数据内部的组件

Question

我正在尝试使用反应表包(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}
/>
)
}
];