如何传递要在 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={(row) => 等...应该读作 onClick={() => 等...
使用访问器：'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...
        />

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

How to pass a function prop to be used within react-table's columns

reactjs

react-table