React 数据表可扩展行：如何传递额外的 Props

Question

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

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

可扩展组件属性

ExpandableComponentProps 允许您将额外的 props 传递给扩展器组件并防止 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传递给组件。它本身并不被称为 React 组件，因此我不清楚如何传递附加 prop 。DataTablesomeTitleProp

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

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

如何传递someTitleProp给 ExpandedComponent？

Answer 1

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

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