如何传递要在 react-table 的列中使用的函数 prop

Question

我正在尝试传递一个要在ReactTable中使用的函数。请注意，我特指 https://react-table.js.org/

这就是我尝试过的。 我在 MyWrapper 的父级中定义了 MyFunctionCallback((，并将其传递给 ReactTable，例如：

<ReactTable
MyFunctionCallback  = this.props.MyFunctionCallback
data                = etc
columns             = etc...
/>

并像这样使用它...

class MyWrapper extends Component{
render() {
var rowsArray = this.props.MyDataArray
var colsDef = [
{
Header: "First name",
accessor: "fname"
},
{
Header: "Last name",
accessor: "lname"
},
{
Header: "Select",
Cell: ({row}) => (<a href='#' onClick={(row) => this.props.MyFunctionCallback('abc', row._original.ID)}> View
</a>
)
}
]
return (
<ReactTable
MyFunctionCallback = this.props.MyFunctionCallback
data ={rowsArray}
columns ={colsDef}
...etc...
/>
); //end-return
} //end-render
}
export default MyWrapper;

几乎有效......除了这不是正确的方法，否则我不会问这个问题。

怎么办？(请保持简单，不需要任何花哨的HOC：-(

更新

onClick={(

1. row( => etc... 应该读 onClick={(( => 等等...
2. 使用访问器："ID"，这样您就不必使用 row._original.ID，只需执行 row.ID

因此更正的部分应为：

{
Header: "Select",
accessor: "ID",
Cell: ({row}) => (
<a href='#' onClick={() => this.props.MyFunctionCallback('abc', row.ID)}>
View
</a>
)
}

Answer 1

代码中一切看起来都很好，除了

改变

<ReactTable
MyFunctionCallback = this.props.MyFunctionCallback //this is not required
data ={rowsArray}
columns ={colsDef}
...etc...
/>

自

<ReactTable
data ={rowsArray}
columns ={colsDef}
...etc...
/>