React-Table: использование нескольких аксессоров в качестве реквизита в пользовательском компоненте - PullRequest
Новая
       14

React-Table: использование нескольких аксессоров в качестве реквизита в пользовательском компоненте

0 голосов
/ 04 апреля 2019

Я пытаюсь использовать 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, но это превратилось в беспорядок. Я не уверен, как поступить правильно, и любая помощь будет очень признательна.

1 Ответ

0 голосов
/ 15 июня 2019

Это можно решить с помощью функции карри. 

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

{
  Cell: curried(applyprops)
}
...