reactjs - react-table 在数据中渲染组件
问题描述
我正在尝试使用 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}
/>
}
解决方案
您正在将一个反应组件传递给一个需要字符串的数据字段。尝试通过Cell
道具自定义您的单元格:
const columns = [
{
Header: "Image",
accessor: "imageUrl",
maxWidth: 70,
minWidth: 70,
Cell: props => <PlaceholderImage width={60} textColor="#fff" text="Image" />
}
];
推荐阅读
- spring-boot - 我的 vue 3 前端和 Java spring boot 日期差异问题
- dask - 为什么 dask 返回子图而不是 read_csv().compute() 上的计算?
- c# - 是否可以在堆栈跟踪中获取 NuGet 包的行号?
- performance - perf 记录(或其他分析器)如何选择将哪条指令计为成本时间?
- python - 在 Django 中,如何获取通过请求调用的基于类的视图的特定方法?
- c++ - macOS 上的 SDL2 和 KISS_SDL 链接问题
- php - 我如何制作一个简单的 RewriteRule?
- c++ - 如何测试 Windows 构建服务器上 Internet 连接中断的 TCP 套接字行为?
- python - 如何在python中合并不同维度的3D数组
- haskell - 为基于另一个类的类型派生一个类实例,它是一个实例