你如何在 react-table 访问器中调用函数？ （反应）

Posted 2023-02-19

【中文标题】你如何在 react-table 访问器中调用函数？ （反应）

【英文标题】：How do you call a function in a react-table accessor? (reactjs)

【发布时间】：2019-12-11 09:58:47

【问题描述】：

我正在修改一个 ReactJS 组件。我添加了一个反应表来获得分页，效果很好。但是表中的一列需要调用也在该组件中的函数，因此它可以根据该记录的内容呈现链接。 （有些结果会呈现链接，有些则不会。）当我在列的访问器属性中列出函数时，它会返回函数中的一些值，但不是全部。因此，链接返回为：

    localhost:3000/view/c/IDnumber/undefined.  

ID号和查询都应该返回，但查询参数是“未定义”。

我尝试在访问器中列出该函数，例如：

    getSerialNo(hit,query)

然后我得到“未定义命中”。 我在这个网站和其他网站上进行了搜索以找到解决方案。

该列如下所示：

    id:'serialno',
    Header: "Serial #",
    accessor: getSerialNo
    

函数部分如下所示：

    const getSerialNo = (hit, query) => 
        const linkAs = '/view/c/$hit._id/$query'
    return <Link href=link as=linkAs><a target="_blank">serialNo
     </a></Link>

我想取回一个实际包含查询的链接，例如：

    localhost:3000/view/c/IDnumber/query

【问题讨论】：

在另一个论坛上得到了答案。使用： const myCustomAccessor = row => getSerialNo(row, props.tableHeader) 然后在访问器调用中： accessor: myCustomAccessor

【参考方案1】：

根据文档

访问器：字符串 |功能

必填 此字符串/函数用于 为您的列构建数据模型。访问器返回的数据 应该是原始的和可排序的。如果传递了一个字符串，则该列的 将通过该键在原始行上查找值，例如。如果你的 列的访问器是 firstName 然后它的值将从 行['名字']。您还可以指定深度嵌套的值 访问器如 info.hobbies 甚至 address[0].street 如果一个函数是 通过，将使用在原始行上查找列的值 这个访问器函数，例如。如果您的列的访问器是 row => row.firstName，那么它的值将通过传递行来确定 到这个函数并使用结果值。

它接受字符串或函数，但请确保您设置了id，您可以对行进行任何操作，如row.attrbuiteName === null ? "no thing" : row.attrbuiteName

     id:'serialno',
     Header: "Serial #",
     accessor: row => row.attrbuiteName
     

参考：

https://github.com/tannerlinsley/react-table/blob/master/docs/api.md

注意如果使用该功能，您必须在行中提供id

【参考方案2】：

是的，如上所述，您可以像这样在访问器中调用函数：

 
    Header: 'Column header',
    accessor: (row) => 
      // some function that returns a primitive value you want to display in the cell
    ,
  ,

我正在添加一个更新的link to documentation，因为上面的那个似乎不再起作用了。