Как получить номер строки «родительской» таблицы в React-таблице из другой таблицы реакции в подкомпоненте? - PullRequest
Новая
       13

Как получить номер строки «родительской» таблицы в React-таблице из другой таблицы реакции в подкомпоненте?

0 голосов
/ 20 марта 2019

Я использую реагирующую таблицу с «родительской» таблицей, которая имеет подкомпонент с другой реагирующей таблицей.

Мне нужно использовать номер строки родителя при редактировании ячейки внутренней таблицы.

Я пытаюсь сгенерировать новый реквизит, который доставит значение row.index родителя, как в parentRow = {row.index} ниже. Но я не могу передать значение row.index.

Вкратце: как передать row.index родительского элемента в таблицу реагирования в подкомпоненте?

Любая помощь приветствуется. 

      <ReactTable
          data={this.props.data}
          columns = {this.WP2columns}
          pageSize={this.props.data.length+1}
          showPagination={false}
          className="-striped -highlight"
          SubComponent={row => {
            return (
              <div style={{ padding: "0 20px" }}>
                {console.log("WP2 SUBTABLE row=", row) }
                <ReactTable
                  data = {row.original.familywp_goal_tasklist}
                  columns={this.subcolumns}
                  parentRow = {row.index}
                  defaultPageSize={3}
                  showPagination={false}
                />
              </div>
            )
          }}
        />

1 Ответ

1 голос
/ 08 апреля 2019

В субкомпоненте используйте resolData prop для передачи индекса родительской строки. 

      <ReactTable
          data={this.props.data}
          columns = {this.WP2columns}
          pageSize={this.props.data.length+1}
          showPagination={false}
          className="-striped -highlight"
          SubComponent={row => {
            return (
              <div style={{ padding: "0 20px" }}>
                <ReactTable
                  data = {row.original.familywp_goal_tasklist}
                  resolveData={data => data.map(d => {
                    return {
                      ...d,
                      parentRow: row.index
                    }
                  })}
                  columns={this.subcolumns}
                  defaultPageSize={3}
                  showPagination={false}
                />
              </div>
            )
          }}
        />

Теперь в параметре редактирования ячейки у вас будет original.parentRow prop.

...