Reactjs if 条件 jsx答案

【问题标题】：Reactjs if condition jsxReactjs if 条件 jsx
【发布时间】：2021-09-13 22:25:18
【问题描述】：

  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 则不会创建元素，如果为 1 则会创建。

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

【问题讨论】：

标签： reactjs

【解决方案1】：

你需要放吗？

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

【讨论】：

【解决方案2】：

看起来你有一些错字，你需要先检查它是否是一个空数组

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

【讨论】：

【解决方案3】：

答案是如果不为零，则创建它：

{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>

【讨论】：

TypeError: Cannot read properties of undefined (reading 'udf_Users_IsHaveModuleAccess')
0 也是一个错误的想法。
@katio 这完全是一个不同的问题

【解决方案4】：

您检查的值是0 还是1？在这种情况下，简单的真实性检查将起作用。

!!grouppermission[0].udf_Users_IsHaveModuleAccess &&

【讨论】：