Question

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

    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

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

Answer 2

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

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

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

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

2 个答案:

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

2 个答案:

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