在 react-table 中显示布尔值和时间戳值:React Table+ React+Typescript
Posted
技术标签:
【中文标题】在 react-table 中显示布尔值和时间戳值:React Table+ React+Typescript【英文标题】:Display boolean and timestamp values inside react-table : React Table+ React+Typescript 【发布时间】:2019-10-06 17:26:42 【问题描述】:我正在尝试打印某些 API 返回的布尔值和时间戳值。我不能这样做。帮助将不胜感激
列配置对象:
<ReactTable
data=this.state.data
columns=[
Header: 'Name',
accessor: 'name'
,
Header: 'Age>18',
accessor: d => d.isAgeAbove18.toString(); // this does not work
,
Header: 'TimeStamp',
accessor: d => d.timeVal.toString(); // this does not work
,
]
/>
【问题讨论】:
这对你有用吗d => d.isAgeAbove18 ? "YES" : "NO"
?
@euvs 不!这个不行
@euvs 你的建议确实有效,只是路过,看到 vr12 说不。顺便说一句,除了Header
和accessor
,我还有id
道具。
【参考方案1】:
查看 React 表文档,它说只要访问器类型不是字符串,您就需要提供 id 属性。所以,我更新的格式应该是这样的。
columns=[
Header: 'Name',
accessor: 'name'
,
id:'age' // add this
Header: 'Age>18',
accessor: d => d.isAgeAbove18.toString();
,
id: 'timestamp' // add this
Header: 'TimeStamp',
accessor: d => d.timeVal.toString();
,
]
【讨论】:
【参考方案2】:如果您使用过滤器,我认为这是最好的解决方案,
id: 'available',
Header: "Available",
accessor: d => return d.available ? 'Available' : 'Not available' ,
filterable: true,
Filter: () => (
<select className='form-control' value=this.state.availability_value onChange=(e) => this.applyFilter(e.target.value) >
<option value=` "available": "" `>Select</option>
<option value=` "available": "" `>All</option>
<option value=` "available": "1" `>Available</option>
<option value=` "available": "0" `>Not available</option>
</select>
)
【讨论】:
以上是关于在 react-table 中显示布尔值和时间戳值:React Table+ React+Typescript的主要内容,如果未能解决你的问题,请参考以下文章