React与TypeScript中基于条件显示元素的实现——React Table精准控制div渲染问题求助

你的问题出在isActive变量的判断逻辑上——当前的条件会把null的情况误判为满足“不显示div”的反向逻辑，最终导致null时意外显示了目标div。我们只需要调整判断条件，精准匹配你需要的场景即可。

修改后的代码方案 #

const buildColumns: (mode: someMode) => [
  {
    Header: 'Name',
    id: 'name',
    Cell: props => {
      // 仅当isActive不为null且严格等于false时，才触发div渲染
      const shouldShowDiv = props.row.original.isActive === false;
      return (
        <>
          {shouldShowDiv && <div>show me</div>}
        </>
      );
    }
  }
]

逻辑细节说明 #

1. 精准匹配需求：props.row.original.isActive === false会自动排除null的情况——因为null === false的结果是false，只有当值严格等于false时，才会触发div的渲染，完美符合你的需求。
2. 可选的显式写法：如果你希望逻辑更直白（避免后续维护时产生歧义），也可以写成更 verbose 的形式，效果完全一致：

   const shouldShowDiv = props.row.original.isActive !== null && props.row.original.isActive === false;
   

3. JSX结构优化：我把条件渲染的内容放在了React片段（<>...</>）中，这是一个小细节——虽然当前只有一个div，但养成这个习惯可以避免后续扩展单元格内容时出现“多个顶级JSX元素”的报错。

另外，你原来的buildColumns函数定义有语法冗余（多了一层(mode) =>），我也顺便修正了，确保函数的类型和结构符合TypeScript的规范。

内容的提问来源于stack exchange，提问作者stackuser