1

阅读文档，React Data Table似乎有一种方法可以将额外的道具传递给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？

4

2 回答 2

3

将额外的 props 传递给expandableRowsComponent参数的方法是将它们作为命名对象传递给expandableRowsComponentProps参数。


function MyComponent({ someTitleProp }) {
    return 
     <DataTable
      columns={columns} 
      data={data} 
      expandableRows 
      expandableRowsComponent={ExpandedComponent}
      expandableRowsComponentProps={{"someTitleProp": someTitleProp}}    
    />;
}
于 2022-01-21T18:09:34.450 回答
0

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

  • 首先你让你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?
    />;
}

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

于 2022-01-21T18:09:35.820 回答