面试题：React中如何用if - else实现组件的条件渲染

Question

假设你有一个React组件，当某个布尔变量isLoggedIn为true时，显示'欢迎，用户'，当为false时，显示'请登录'。请用if - else语句在该组件中实现这个条件渲染逻辑。

Answer 1

import React from 'react';

const MyComponent = ({ isLoggedIn }) => {
  let message;
  if (isLoggedIn) {
    message = '欢迎，用户';
  } else {
    message = '请登录';
  }
  return <div>{message}</div>;
};

export default MyComponent;