React数据表可扩展行:如何传递额外的Prop

Question

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

这是从文档中粘贴的副本：

可扩展组件道具

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组件，所以我不清楚如何传递额外的道具someTitleProp。

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

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

如何将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?
/>;
}

这应该能解决你的问题。