React Data Table Expandable Rows：如何传递额外的道具

Question

阅读 Docs for React Data Table，似乎有一种方法可以将额外的 Props 传递给 expandableRowsComponent。

这是从文档中复制粘贴的：

expandableComponentProps

expandableComponentProps 允许您将额外的道具传递给扩展器组件并防止 TypeScript 抱怨：


import * as React from 'react';
import DataTable, { ExpanderComponentProps } from 'react-data-table-component';

interface Row {
    title: string;
    director: string;
    year: string;
}

interface Props extends ExpanderComponentProps<Row> {
    // currently, props that extend ExpanderComponentProps must be set to optional.
    someTitleProp?: string;
}

const ExpandableRowComponent: React.FC<Props> = ({ data, someTitleProp }) => {
    return (
        <>
            <p>{someTitleProp}</p>
            <p>{data.title}</p>
            <p>{data.director}</p>
            <p>{data.year}</p>
        </>
    );
};

以上我明白了

但是，此 ExpandableRowComponent 作为参数传递给 DataTable 组件。它本身不被称为 React 组件，所以我不清楚如何传递额外的 prop someTitleProp.


function MyComponent({ someTitleProp }) {
    return 
     <DataTable
      columns={columns} 
      data={data} 
      expandableRows 
      expandableRowsComponent={ExpandedComponent} //where does someTitleProp go?
    />;
}

我已经尝试了一些方法，但到目前为止我得到的要么是错误，要么是 ExpandedComponent 中未定义 someTitleProp。

如何将 someTitleProp 传递给 ExpandedComponent？

Answer 1

将附加道具传递给 expandableRowsComponent 参数的方法是将它们作为命名对象传递给 expandableRowsComponentProps 参数。


function MyComponent({ someTitleProp }) {
    return 
     <DataTable
      columns={columns} 
      data={data} 
      expandableRows 
      expandableRowsComponent={ExpandedComponent}
      expandableRowsComponentProps={{"someTitleProp": someTitleProp}}    
    />;
}

Answer 2

您可以这样做的一种方法是：

首先你让你的ExpandableRowComponent成为高阶函数

const ExpandableRowComponent: (someTitleProp: string) => React.FC<Props> = (someTitleProp) => ({ data }) => {
    return (
        <>
            <p>{someTitleProp}</p>
            <p>{data.title}</p>
            <p>{data.director}</p>
            <p>{data.year}</p>
        </>
    );
};

然后您使用 DataTable 属性中的所需参数调用函数，如下所示：

function MyComponent({ someTitleProp }) {
    return 
     <DataTable
      columns={columns} 
      data={data} 
      expandableRows 
      expandableRowsComponent={ExpandedComponent(someTitleProps)} //where does someTitleProp go?
    />;
}

这应该可以解决您的问题。

React Data Table Expandable Rows：如何传递额外的道具

React Data Table Expandable Rows : how to pass additional Props

typescript

reactjs

react-data-table-component

expandableComponentProps