在 React 中实现条件渲染的七种方法

一、if 语句

先从 React 最基本的条件类型来看。如果有数据就显示组件，如果没有数据就不显示任何内容。posts 为需要渲染的列表：

export default function App() {
  const { posts } = usePosts();

  if (!posts) return null;

  return (
    
      
    
  );
}

这种形式会生效的原因就是我们会提前返回，如果满足条件(posts 值不存在)，就通过return null 在组件中不显示任何内容。

如果有多个要检查的条件时，也可以使用 if 语句。例如，在显示数据之前检查加载和错误状态：

export default function App() {
  const { isLoading, isError, posts } = usePosts();   
  if (isLoading) return Loading...;
  if (isError) return Error!;
  return (
    
      
    
  );
}

这里我们可以多次使用 if 语句，不需要再使用 else 或者 if-eles 语句，这样就减少了需要编写的代码，并且可读性更强。

二、三元运算符

当我们想提前退出或者什么都不显示时，if 语句会很有用。但是，如果我们不想写一个与返回的 JSX 分开的条件，而是直接在其中写呢?那就可以使用三元表达式来编写条件。

在 React 中，我们必须在 JSX 中包含表达式，而不是语句。这就是为什么我们在 JSX 中只能使用三元表达式，而不是 if 语句来编写条件。

例如，在移动设备的屏幕上显示一个组件，而在更大的屏幕上显示另一个组件，就可以使用三元表达式来实现：

export default function App() {
  const isMobile = useWindowSize()

  return (
    

      

      {isMobile ?  : }
    
  )
}

其实，不必将这些三元表达式包含在 JSX 中，可以将其结果分配给一个变量，然后在需要的地方使用即可：

export default function App() {
  const isMobile = useWindowSize();   
  const ChatComponent = isMobile ?  : ;
  return (
    

      

      
      {ChatComponent}
    
  )
}

三、&&运算符

在许多情况下，我们可能想要使用三元表达式，但是如果不满足条件，就不显示任何内容。那代码会是这样的：

condition ?  : null.

可以使用 && 运算符来简化：

export default function App() {
  const { posts, hasFinished } = usePosts()
  return (
    <>
      
      {hasFinished && (
        
已经到底啦!
      )}
    
  )
}

如果条件为真，则逻辑 && 运算符之后的表达式将是输出。如果条件为假，React 会忽略并跳过表达式.

四、switch

过多的 if 语句会导致组件变得混乱，可以将多个条件提取到包含 switch 语句的单独的组件中(根据组件逻辑的复杂程度来选择是否提取到单独的组件)。下面来看一个简单的菜单切换组件：

export default function Menu() {
  const [menu, setMenu] = React.useState(1);

  const toggleMenu = () => {
    setMenu((m) => {
      if (m === 3) return 1;
      return m + 1;
    });
  }
  return (
    <>
      
      切换菜单
    
  );
}
function MenuItem({ menu }) {
  switch (menu) {
    case 1:
      return ;
    case 2:
      return ;
    case 3:
      return ;
    default:
      return null;
  }
}

由于使用带有 switch 语句的 MenuItem 组件父菜单组件不会被条件逻辑弄乱，可以很容易地看到给定 menu 状态将显示哪个组件。需要注意，必须为 switch case 运算符使用默认值，因为在 React 中，组件始终需要返回一个元素或 null。

五、枚举

在 JavaScript 中，当对象用作键值对的映射时，它可以用作枚举：

const ENUMOBJECT = {
  a: '1',
  b: '2',
  c: '3',
};

假如要创建三个不同的组件 Foo、Bar 和 Default，并根据某种状态显示这些组件：

const Foo = () => {
  return FOO;
};
const Bar = () => {
  return BAR;
};
const Default = () => {
  return DEFAULT;
};

创建可用作枚举的对象：

const ENUM_STATES = {
  foo: ,
  bar: ,
  default: 
};

渲染这个枚举对象的函数：

function EnumState({ state }) {
  return {ENUM_STATES[state]};
}

上面的 state 属性可以从对象中检索值。可以看到，与 switch case 运算符相比，它更具可读性。

六、JSX 库

JSX Control Statements 库扩展了 JSX 的功能，从而可以直接使用 JSX 实现条件渲染。它是一个 Babel 插件，可以在转译过程中将类似组件的控制语句转换为对应的 JavaScript。

安装babel-plugin-jsx-control-statements包并修改 Babel 配置后，可以像这样重写应用程序：

export default function App(props) {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
    //...
    return (
      
        
        Logout;
        
          
          Login;
        
      
    );
}

当然，不建议这样来编写条件语句，这样会导致代码的可读性变差，并且 JSX 允许使用强大的 JavaScript 功能来自己处理条件渲染，无需添加模板组件即可启用它。

七、高阶组件

高阶组件 (HOC)与 React 中的条件渲染完美匹配。HOC 可以帮助处理多个用例，但一个用例可能是使用条件渲染来改变组件的外观。让我们看看显示元素或组件的 HOC：

function withLoadingIndicator(Component) {
  return function EnhancedComponent({ isLoading, ...props }) {
    if (!isLoading) {
      return ;
    }
    return (
      
        
Loading
      
    );
  };
}
const ListWithLoadingIndicator = withLoadingIndicator(List);
function App({ list, isLoading }) {
  return (
      
  );
}

在这个例子中，List 组件可以专注于呈现列表。而不必再加载状态。HOC 隐藏了实际组件中的所有干扰。最终，可以添加多个高阶组件来隐藏多个条件渲染边缘情况。

一、小心 0

来看一个常见的渲染示例，当数组中存在元素时才渲染内容：

{gallery.length && }

预想的结果是，数组存在元素时渲染内容，不存在元素时什么都不渲染。但是，页面上得到了 “0”。这是因为在使用与运算符时，一个假的左侧值(如 0)会立即返回。在JavaScript中，布尔运算法不会将其结果转化为布尔值。所以，React 将得到的值放入DOM中，与 false 不同的是，0 是一个有效的 React 节点，所以最终会渲染成0。

那该如何避免这个问题呢?可以显式的将条件转换为布尔值，当表达式结果为false时，就不会在页面中渲染了：

gallery.length > 0 && jsx
!!gallery.length && jsx
Boolean(gallery.length) && jsx

或者使用三元表达式来实现：

{gallery.length ?  : null}

二、优先级

与运算符(&&)比或运算符(||)具有更高的优先级。所以，要格外小心使用包含与运算符的 JSX 条件：

user.anonymous || user.restricted && 

这样写就相当于：

user.anonymous || (user.restricted && )

这样，与运算符左侧为真时就会直接返回，而不会继续执行后面的代码。所以，多数情况下，看到或运算符时，就将其使用括号括起来，避免因为优先级问题而渲染出错：

{(user.anonymous || user.restricted) && }

三、 嵌套三元表达式

三元表达式适合在两个JSX之间进行切换，一旦超过两个项目，代码就会变得糟糕：

{
  isEmoji
    ? 
    : isCoupon
        ? 
        : isLoaded && 
}

有时使用 && 来实现会更好，不过一些条件判断会重复：

{isEmoji && }
{isCoupon && }
{!isEmoji && !isCoupon && isLoaded && }

当然，这种情况下，使用 if 语句可能是更好的选择：

const getButton = () => {
    if (isEmoji) return ;
    if (isCoupon) return ;
    return isLoaded ?  : null;
};

四、避免 JSX 作为条件

通过 props 传递的 React 元素能不能作为判断条件呢?来看一个简单的例子：

const Wrap = (props) => {
    if (!props.children) return null;
    return {props.children}
};

我们希望 Wrap 在没有包含内容时呈现 null，但 React 不是这样工作的：

{hasItem ?  : }

{
  mode === 'name'
    ? 
    : 
}

{
  mode === 'name'
    ? 
    : 
}

{mode === 'name' && }
{mode !== 'name' && }