reactjs - React 数据表可扩展行 : how to pass additional Props

Question

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

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

expandableComponentProps

expandableComponentProps 允许您将额外的 Prop 传递给您的扩展器组件并防止 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

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

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