基于条件在 JSX 中显示/隐藏复选框-js教程-PHP中文网

基于条件在 JSX 中显示/隐藏复选框

碧海醫心

发布： 2025-10-09 11:25:33

原创

512人浏览过

基于条件在 jsx 中显示/隐藏复选框

本文旨在解决在 JSX 中根据特定条件动态显示或隐藏复选框的问题。我们将深入探讨如何使用逻辑运算符和 HTML hidden 属性来实现这一目标，并提供清晰的代码示例和注意事项，帮助你更好地掌握在 React 应用中控制组件可见性的技巧。

使用逻辑运算符控制组件渲染

在 React 中，我们可以利用 JSX 的条件渲染功能，根据不同的条件来决定是否渲染某个组件。对于复选框的显示与隐藏，可以使用逻辑运算符 && 和 || 来构建条件表达式。

原始代码的问题：

原始代码中的条件判断逻辑存在问题：

{!isOpsAdmin || !isOmiAdmin || !isRider || !isRunner && (
  <TableCell padding="checkbox">
    <Checkbox
      // eslint-disable-next-line no-console
      onChange={() => console.log("checked all")}
    />
  </TableCell>
)}

登录后复制

这段代码的意图是，当 isOpsAdmin、isOmiAdmin、isRider 和 isRunner 均为 false 时，才显示复选框。然而，由于逻辑运算符的优先级问题，|| 的优先级高于 &&，导致实际的判断逻辑并非预期。

正确的条件判断：

要实现当任何一个条件为 true 时隐藏复选框，可以使用以下逻辑：

{!(isOpsAdmin || isOmiAdmin || isRider || isRunner) && (
  <TableCell padding="checkbox">
    <Checkbox
      // eslint-disable-next-line no-console
      onChange={() => console.log("checked all")}
    />
  </TableCell>
)}

登录后复制

或者，为了更清晰地表达意图，可以先将条件组合起来：

硅基智能

基于Web3.0的元宇宙，去中心化的互联网，高质量、沉浸式元宇宙直播平台，用数字化重新定义直播

查看详情

{
  const shouldHideCheckbox = isOpsAdmin || isOmiAdmin || isRider || isRunner;
  return (
    !shouldHideCheckbox && (
      <TableCell padding="checkbox">
        <Checkbox
          // eslint-disable-next-line no-console
          onChange={() => console.log("checked all")}
        />
      </TableCell>
    )
  );
}

登录后复制

这种写法更易于理解和维护。

使用 hidden 属性控制组件可见性

除了条件渲染，还可以使用 HTML 的 hidden 属性来控制组件的可见性。hidden 属性接受一个布尔值，当其为 true 时，组件将被隐藏。

示例代码：

<TableCell
  padding="checkbox"
  hidden={isOpsAdmin || isOmiAdmin || isRider || isRunner}
>
  <Checkbox
    // eslint-disable-next-line no-console
    onChange={() => console.log("checked all")}
  />
</TableCell>

登录后复制

或者，如果只想隐藏复选框本身，而不是整个 TableCell，可以将 hidden 属性应用于 Checkbox 组件：

<TableCell padding="checkbox">
  <Checkbox
    hidden={isOpsAdmin || isOmiAdmin || isRider || isRunner}
    // eslint-disable-next-line no-console
    onChange={() => console.log("checked all")}
  />
</TableCell>

登录后复制

注意事项：