若条件jsx的反应jsx

Question

  const [grouppermission, SetGrpPermissions] =useState([]);

  const Group = async () => {
    const response = await userModulePermission("20",_UsersId);
    console.log("responseGROUP: ", response.data)
    SetGrpPermissions(response.data.map(user => ({
          udf_Users_IsHaveModuleAccess:user.udf_Users_IsHaveModuleAccess
        })))
  }
  useEffect(() => {
    Group();
  }, [reRender]);

这就是结果

​

​

这就是if条件的位置，我只想知道如果udf_Users_IsHaveModuleAccess是0，那么它就不会是createElement，如果1，那么它就会创建。

    {grouppermission[0].udf_Users_IsHaveModuleAccess &&
        <CCreateElement
        items={groupperms}
        components={{
          CSidebarNavDivider,
          CSidebarNavDropdown,
          CSidebarNavItem,
          CSidebarNavTitle
        }}
      />
    }

Answer 1

你要放吗？

{grouppermission[0]?.udf_Users_IsHaveModuleAccess !== 0 &&
        <CCreateElement
        items={groupperms}
        components={{
          CSidebarNavDivider,
          CSidebarNavDropdown,
          CSidebarNavItem,
          CSidebarNavTitle
        }}
      />
    }

Answer 2

答案是，如果不是零，那么创建它：

{grouppermission[0].udf_Users_IsHaveModuleAccess !== 0 &&
        <CCreateElement
        items={groupperms}
        components={{
          CSidebarNavDivider,
          CSidebarNavDropdown,
          CSidebarNavItem,
          CSidebarNavTitle
        }}
      />
    }

或者如果你想明确地说它是1：

{grouppermission[0].udf_Users_IsHaveModuleAccess === 1 &&
        <CCreateElement
        items={groupperms}
        components={{
          CSidebarNavDivider,
          CSidebarNavDropdown,
          CSidebarNavItem,
          CSidebarNavTitle
        }}
      />
    }

我更喜欢在函数中进行有条件的呈现。假设这是一个函数组件：

const RenderCCreateElement = ():JSX.Element => {
      if(grouppermission[0].udf_Users_IsHaveModuleAccess === 0){
            return (<React.Element />);
      }

      if(grouppermission[0].udf_Users_IsHaveModuleAccess === 1){
            return (
              <CCreateElement
            items={groupperms}
            components={{
              CSidebarNavDivider,
              CSidebarNavDropdown,
              CSidebarNavItem,
              CSidebarNavTitle
            }}
          />
            );
      }

     return (<React.Element />);
};

例如，您可以这样称呼它：

<div>{RenderCCreateElement()}</div>

Answer 3

看起来像是有一些错误，您需要首先检查它是否是空数组，首先是

{
  grouppermission[0]?.udf_Users_IsHaveModuleAccess && (  //<-- Add optional chaining here
    <CreateElement   // <-- CCreateElement is this a typo?
      items={groupperms}
      components={{
        CSidebarNavDivider,
        CSidebarNavDropdown,
        CSidebarNavItem,
        CSidebarNavTitle
      }}
    />
  );
}