context/projects-context.js

    • 对外暴露的是 和useProjectsValue
    • 包裹要用这个context里值的组件
    • 在需要用context的组件里，通过 const { setSelectedProject } = useSelectedProjectValue ```javascript import React, { createContext, useContext } from ‘react’; import { useProjects } from ‘../hooks’;

    export const ProjectsContext = createContext(); export const ProjectsProvider = ({ children }) => { const { projects, setProjects } = useProjects();

    return ( {children} ); };

    export const useProjectsValue = () => useContext(ProjectsContext);

    2. **context/index.js**
    3. ```javascript
    4. import {
    5.   ProjectsContext,
    6.   ProjectsProvider,
    7.   useProjectsValue,
    8. } from './projects-context';
    10. export {
    11.   ProjectsContext,
    12.   ProjectsProvider,
    13.   useProjectsValue,
    14. };

    App.js

    1. import React from 'react';
    2. import { Header } from './components/layout/Header';
    3. import { Content } from './components/layout/Content';
    4. import { ProjectsProvider } from './context';
    6. export const App = () => {
    7.   return (
    8.     <ProjectsProvider>
    9.         <div className="App">
    10.             <Header />
    11.             <Content />
    12.         </div>
    13.     </ProjectsProvider>
    14.   );
    15. };

    Sidebar.js

    1. import React, { useState } from 'react';
    2. import {
    3.   FaChevronDown,
    4.   FaInbox,
    5.   FaRegCalendarAlt,
    6.   FaRegCalendar,
    7. } from 'react-icons/fa';
    8. import { useSelectedProjectValue } from '../../context';
    10. export const Sidebar = () => {
    11.   const { setSelectedProject } = useSelectedProjectValue;
    12.   const [active, setActive] = useState('inbox');
    13.   const [showProjects, setShowProjects] = useState(true);
    15.   return (
    16.     <div className="sidebar" data-testid="sidebar">
    17.       <ul className="sidebar__generic">
    18.         <li data-testid="inbox" className="inbox">
    19.           <span>
    20.             <FaInbox />
    21.           </span>
    22.           <span>Inbox</span>
    23.         </li>
    24.         <li data-testid="today" className="today">
    25.           <span>
    26.             <FaRegCalendar />
    27.           </span>
    28.           <span>Today</span>
    29.         </li>
    30.         <li data-testid="next_7" className="next_7">
    31.           <span>
    32.             <FaRegCalendarAlt />
    33.           </span>
    34.           <span>Next 7 days</span>
    35.         </li>
    36.       </ul>
    37.       <div className="sidebar__middle">
    38.         <span>
    39.           <FaChevronDown />
    40.         </span>
    41.         <h2>Projects</h2>
    42.       </div>
    43.       <ul className="sidebar__projects">Projects will be here!</ul>
    44.       Add Project Component here!
    45.     </div>
    46.   );
    47. };