面试题：React中使用Context API进行嵌套组件的条件渲染

Question

有一个多层嵌套的React组件结构，最外层通过Context API传递了一个用户角色`userRole`（值可能为'admin'，'user'，'guest'）。在最内层组件中，根据`userRole`的值来条件渲染不同的操作按钮。如果是'admin'，显示'删除'，'编辑'按钮；如果是'user'，显示'编辑'按钮；如果是'guest'，不显示任何按钮。请写出完整的实现代码，包括Context的创建、传递和内层组件的条件渲染逻辑。

Answer 1

1. 创建Context：
   • 在React应用中，首先要创建Context对象。假设创建一个UserRoleContext.js文件。

   import React from'react';
   
   const UserRoleContext = React.createContext();
   
   export default UserRoleContext;
   

2. 传递Context：
   • 在最外层组件中，通过UserRoleContext.Provider来传递userRole。假设外层组件是App.js。

   import React from'react';
   import UserRoleContext from './UserRoleContext';
   import InnerComponent from './InnerComponent';
   
   const App = () => {
       const userRole = 'admin';// 这里可以根据实际情况动态获取，比如从API获取
       return (
           <UserRoleContext.Provider value={userRole}>
               <InnerComponent />
           </UserRoleContext.Provider>
       );
   };
   
   export default App;
   

3. 内层组件条件渲染逻辑：
   • 在InnerComponent.js中，通过UserRoleContext.Consumer来消费userRole并进行条件渲染。

   import React from'react';
   import UserRoleContext from './UserRoleContext';
   
   const InnerComponent = () => {
       return (
           <UserRoleContext.Consumer>
               {userRole => {
                   let buttons = null;
                   if (userRole === 'admin') {
                       buttons = (
                           <>
                               <button>删除</button>
                               <button>编辑</button>
                           </>
                       );
                   } else if (userRole === 'user') {
                       buttons = <button>编辑</button>;
                   }
                   return buttons;
               }}
           </UserRoleContext.Consumer>
       );
   };
   
   export default InnerComponent;
   

在现代React中，也可以使用useContext钩子来替代UserRoleContext.Consumer，代码如下：

1. 内层组件使用useContext：
   • 修改InnerComponent.js

   import React, { useContext } from'react';
   import UserRoleContext from './UserRoleContext';
   
   const InnerComponent = () => {
       const userRole = useContext(UserRoleContext);
       let buttons = null;
       if (userRole === 'admin') {
           buttons = (
               <>
                   <button>删除</button>
                   <button>编辑</button>
               </>
           );
       } else if (userRole === 'user') {
           buttons = <button>编辑</button>;
       }
       return buttons;
   };
   
   export default InnerComponent;