面试题：React函数组件中条件渲染的常见方式有哪些

Question

在React函数组件里，阐述至少两种实现条件渲染的常见方式，并各举一个简单示例。

Answer 1

1. 使用 if 语句

在函数组件内部使用普通的 if 语句来进行条件渲染。

import React from 'react';

const ConditionalRendering = () => {
  const isLoggedIn = true;
  let content;
  if (isLoggedIn) {
    content = <p>欢迎，用户已登录！</p>;
  } else {
    content = <p>请登录。</p>;
  }
  return <div>{content}</div>;
};

export default ConditionalRendering;

2. 使用逻辑与（&&）运算符

逻辑与运算符 && 左侧为真时，才会渲染右侧的 JSX 元素。

import React from 'react';

const ConditionalRendering = () => {
  const isLoggedIn = true;
  return (
    <div>
      {isLoggedIn && <p>欢迎，用户已登录！</p>}
      {!isLoggedIn && <p>请登录。</p>}
    </div>
  );
};

export default ConditionalRendering;

3. 使用三元运算符（condition? true : false）

根据条件返回不同的 JSX 元素。

import React from 'react';

const ConditionalRendering = () => {
  const isLoggedIn = true;
  return (
    <div>
      {isLoggedIn? <p>欢迎，用户已登录！</p> : <p>请登录。</p>}
    </div>
  );
};

export default ConditionalRendering;