reactjs - 如何使用 react 和 typescript 根据条件显示元素？

Question

我想根据使用 react 表和 typescript 从表数据中获取的特定条件显示 div 元素

代码

const buildColumns: (mode: someMode,) => (mode) => [
    {
       Header: 'Name',
       id: 'name',
       Cell: props => {
           const isActive = props.row.original.isActive === true 
                         || props.row.original.isActive === null;
       return (
           {!isActive &&
              <div>show me</div>
           });
      }
]

现在如果 isActive 不是 null 并且如果 isActive 是 false 我应该显示 div 元素。我该怎么做。

即使 isActive 为 null，上述条件也会显示它。有人可以帮我解决这个问题吗？谢谢。

Answer 1

正如我已经解释过的，您可以通过两种方法来解决这个问题

1. 您可以直接在您的组件条件上添加一个nullchecker。

    isActive != null && !isActive  &&
      <div>show me</div>
    });
   

2. 您可以直接更改isActive 变量。

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

   并直接将其添加到div as

   { isActive &&
      <div>show me</div>
   });