如何将自定义道具从 App 传递到 react-table v7 的单元格？

Question

这就是我渲染 Table body:

的方式

        <tbody {...getTableBodyProps()}>
          {rows.map((row, i) => {
            prepareRow(row);
            return (
              <Row {...row.getRowProps()}>
                {row.cells.map((cell) => {
                  // return <td {...cell.getCellProps()}>{cell.render("Cell")}</td>;
                  return cell.render("Cell");
                })}
              </Row>
            );
          })}
        </tbody>

这就是我设置列的方式。我为每个单元格创建了独特的组件。

[
  {
    Header: "Main Header",
    Footer: "Foot",
    columns: [
      {
        Header: "Code",
        accessor: "NominalCode",
        Cell: (props) => {
          return <CodeCell>{props.cell.value}</CodeCell>;
        },
        Footer: () => {
          return <FooterTotalCell>Total</FooterTotalCell>;
        }
      },
      {
        Header: "Description",
        accessor: "Description",
        Cell: (props) => {
          return (
            <DescriptionCell country={props.row.values.Currency}>
              {String(props.cell.value)}
            </DescriptionCell>
          );
        },
        Footer: () => {
          return <td />;
        }
      }
]

我想将一个函数作为道具从我的 App.jsx 主文件传递到 DescriptionCell 组件。此函数将用于在 DescriptionCell.

中执行一些 onClick 功能

我该怎么做？

谢谢。

Answer 1

您可以通过使用传递给 Cell 组件的 column 属性来实现：

columns: [
  ...
  {
    Header: "Description",
    accessor: "Description",
    onClick: () => { alert('click!'); },
    Cell: (props) => {
      return (
        <DescriptionCell onClick={props.column.onClick} country={props.row.values.Currency}>
          {String(props.cell.value)}
        </DescriptionCell>
      );
    },
  }

或者，如果您的函数可能会被许多其他单元使用（比如更新您的后端），您可以将该函数传递给主 Table 组件，如本例所示：https://github.com/tannerlinsley/react-table/blob/master/examples/kitchen-sink-controlled/src/App.js#L622

Answer 2

您也可以在 Cell by Cell 的基础上通过将 props 对象直接传递给渲染函数来执行此操作：

...
  {rows.cells.map(cell => cell.render('Cell', { test: 'this is a test'}))}
...

然后在你的列定义中

columns: [
  ...
  {
    Cell: (props) => {
      console.log(props.test) // the value is 'this is a test'
      return (
        <CustomComponent test={props.test} />
      );
    },
  }

如何将自定义道具从 App 传递到 react-table v7 的单元格？

How to pass a custom prop from App to cell for react-table v7?

react-table