根据访问者值有条件地渲染单元数据

Question

只是开始使用react-table，试图弄清楚如何根据访问者的值有条件地渲染某些内容。我从api调用中获取了一些数据，并为访问器使用了其中一个值。

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

所以我有一列带有标题"Action"的列，在这里我想有条件地渲染一个按钮，如果访问者值为attrbiutes.startTime === null或沿这些行的内容。

UI的渲染在另一个文件中进行，所以我也需要在此处访问它以处理按钮onClick

我在这里有一个带有working example的codeandbox。

Answer 1

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

const columns = [

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