React-Table：在自定义组件中使用多个访问器作为道具

Question

我正在尝试使用 React-Table，但遇到了问题：

我需要使用多个访问器，然后将这些值作为道具传递给自定义组件，这样我就可以为每个用户呈现具有某些统计信息的模式。

我知道我只能将字符串或函数传递给 React Table 中的访问器，但我不确定如何将这些值作为道具返回。

我已经阅读了网站上的文档，虽然它提供了如何将事物组合到一个单元格中的简单示例，但我仍然不知道如何处理将道具从多个访问器传递到嵌入的自定义组件中在一个单元格中。

// 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"
/>

我尝试将访问器保留为 firstName，并使用 row.row 或 row.original 访问行对象，但这变得一团糟。我不确定如何以正确的方式解决此问题，我们将不胜感激。

Answer 1

这可以通过柯里化函数来解决。

const curried = xtraprops => row => (
  // do something with xtraprops
  row.value ? 'Completed' : 'Incomplete'
)

{
  Cell: curried(applyprops)
}