我正在尝试使用React-Table，但遇到了一个问题：
我需要使用多个访问器，然后将这些值作为道具传递到自定义组件中，以便为每个用户提供具有某些统计信息的模式。
我知道我只能将字符串或函数传递到React Table的访问器中，但是我不确定如何将这些值作为prop返回。
我已经阅读了该网站上的文档，尽管它提供了有关如何将事物组合到一个单元格中的简单示例，但是我仍然不知道如何处理道具从多个访问器传递到嵌入的自定义组件中的情况在一个单元格中。
<div class="main">
<div class="intro">
<div class="intro__header">
Hello, world!
</div>
</div>
<div class="about">About section
</div>
</div>我尝试只将访问器保留为firstName，然后使用// sample data
const data = {
completionDate: "April 2, 2019 1:12 PM",
courseCompleted true,
firstName "John",
hd: "Technology",
lastName: "Doe",
nextRequirement: "April 2, 2021 1:12 PM",
userAccessDate "April 3, 2019 4:35 PM",
userEmail: "john.doe@webmail.com"
userToken:"123abc"
}
// columns structure
const columns=[{
columns: [
{
Header: "First Name",
accessor: "firstName"
},
{
Header: "Last Name",
accessor: "lastName"
},
{
Header: "Email",
accessor: "userEmail"
},
{
Header: "Course Completion",
accessor: "courseCompleted",
Cell: row => (
row.value ? 'Completed' : 'Incomplete'
)
},
{
Header: "Completion Date",
accessor: "completionDate",
Cell: row => {
if(row.value) {
return moment(row.value).format('L')
} else {
return 'Incomplete'
}
}
},
{
Header: "Next Due Date",
accessor: "nextRequirement",
Cell: row => {
if (!row.value) {
return <span className="text-danger">Incomplete</span>
} else if ((moment(row.value).diff(moment(), 'days') <= 30)) {
return <span className="text-danger">{moment(row.value).format('L')}</span>
} else if ((moment(row.value).diff(moment(), 'days') >= 31) && (moment(row.value).diff(moment(), 'days') <= 59)) {
return <span className="text-warning">{moment(row.value).format('L')}</span>
} else {
return <span className="text-success">{moment(row.value).format('L')}</span>
}
}
},
// here's where the problem lays
{
Header: "View Certificate",
accessor: d => {
}
Cell: row => {
return <div>
<span onClick={this.openModal}>View Certficate</span>
<Popup
open={this.state.modal}
closeOnDocumentClick
onClose={this.closeModal}
contentStyle={popupStyle}
>
<Certificate
firstName={row.row.firstName}
lastName={row.row.lastName}
completionDate={row.row.completionDate}
userToken={row.original.userToken.slice(117, 129)}
division={this.handleHd(row.original.hd)}
/>
</Popup>
</div>
}
},
{
Header: "Reminder",
accessor: "userEmail",
Cell: row => {
return <MailTo email={row.value} />
}
}
]
}]
<ReactTable data={data}
columns={columns}
defaultPageSize={10}
className="-striped -highlight"
/>
或row.row进入行对象，但这变成了混乱。我不确定该如何正确处理，任何帮助将不胜感激。
答案 0 :(得分：0)
这可以通过咖喱函数解决。
const curried = xtraprops => row => (
// do something with xtraprops
row.value ? 'Completed' : 'Incomplete'
)
{
Cell: curried(applyprops)
}