reactjs - 如何传递要在 react 表的列中使用的函数 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 :-)

更新

1. onClick={(row) => etc... 应该读作 onClick={() => etc...
2. 使用 accessor: '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...
        />