面试题：React中如何在Context API的基础上进行简单的条件渲染

Question

假设你有一个React应用，通过Context API传递了一个布尔值`isLoggedIn`，请编写代码，根据这个`isLoggedIn`的值在页面上条件渲染出不同的内容，例如当`isLoggedIn`为`true`时显示'欢迎，用户'，为`false`时显示'请登录'。

Answer 1

import React, { useContext } from 'react';

// 创建Context
const LoginContext = React.createContext();

function App() {
  // 假设从某个地方获取到isLoggedIn的值
  const isLoggedIn = true; 

  return (
    <LoginContext.Provider value={isLoggedIn}>
      <DisplayContent />
    </LoginContext.Provider>
  );
}

function DisplayContent() {
  const isLoggedIn = useContext(LoginContext);
  return (
    <div>
      {isLoggedIn ? '欢迎，用户' : '请登录'}
    </div>
  );
}

export default App;