根据访问器值有条件地渲染单元格数据答案

【问题标题】：Conditionally rendering cell data based on accessor value根据访问器值有条件地渲染单元格数据
【发布时间】：2020-07-14 16:20:41
【问题描述】：

刚开始使用react-table，试图弄清楚如何根据访问器值有条件地渲染某些东西。我从 api 调用中取回一些数据并使用访问器的值之一。

{
   Header: "Action",
   id: "startTime",
   accessor: "attributes.startTime"
}

所以我有一个标题为"Action" 的列，在这里我想有条件地呈现一个按钮，如果访问器值attrbiutes.startTime === null 或类似的东西。

UI 的渲染发生在不同的文件中，所以我还需要在那里访问它以处理按钮 onClick

我这里有一个带有working example 的代码框。

【问题讨论】：

标签： reactjs react-table

【解决方案1】：

您可以使用自定义单元格渲染器

const columns = [

  {
     Header: "Action",
     id: "startTime",
     accessor: "attributes.startTime",
     Cell: props => {
        return props.value === null ? <button>Click Me </button> : props.value;
     }
  }
];

【讨论】：

谢谢，在文档中似乎找不到这个。 props.value 在这里究竟代表什么？
props.value 表示由访问键提取的值，例如在这种情况下attributes.startTime