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;
     }
  }
];

根据访问者值有条件地呈现单元格数据

1 个答案: