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

Question

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

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

IDnumber和query都应该返回，但是query参数是“undefined”。

我试过在访问器中列出函数，如：

    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

Answer 1

根据文件

访问器：字符串 | 功能

必需 此字符串/函数用于为您的列构建数据模型。访问器返回的数据应该是原始的和可排序的。如果传递了一个字符串，则将通过该键在原始行上查找该列的值，例如。如果您的列的访问器是 firstName，那么它的值将从 row['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

Answer 2

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

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

我正在添加一个更新的文档链接，因为上面的链接似乎不再起作用。