useContent示例

//App.js
import {UseContent} from './useContent.js'
import React from "react";

function App() {
  return (
    
  );
}

export default App;

//useContent.js
import React, { useReducer, createContext } from 'react'
import { ChildSecond } from './ContentHook/ChildSecond'
import { store, reducer} from './Store'
import Routing from './routing.js'

export const Context = createContext(null)

export function UseContent() {
    const [state, dispatch] = useReducer(reducer, store)

    return (
        
            
            
        
    )
} 

//routing.js
import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

import { ChildFirst1 } from './ContentHook/ChildFirst1'
import { ChildFirst2 } from './ContentHook/ChildFirst2'
import { Cavvas } from './Canvas/LittleBalls.js'

const routes = [
  {
    path: "/sandwiches",
    component: Sandwiches
  },
  {
    path: "/tacos",
    component: Tacos,
    routes: [
      {
        path: "/tacos/bus",
        component: Bus
      },
      {
        path: "/tacos/cart",
        component: Cart
      }
    ]
  },
  {
    path: "/littleBalls",
    component: Cavvas
  }
];

export default function Routing() {
  return (
    
      

        

          

            Tacos
          
          

            Sandwiches
          
          

            little balls
          
        

        
          {routes.map((route, i) => (
            
          ))}
        
      
    
  );
}

function RouteWithSubRoutes(route) {
  return (
     (
        // pass the sub-routes down to keep nesting
        
      )}
    />
  );
}

function Sandwiches() {
  return 
Sandwiches
;
}

function Tacos({ routes }) {
  return (
    

      
Tacos
      

        

          Bus
        
        

          Cart
        
      

      
        {routes.map((route, i) => (
          
        ))}
      
    
  );
}

function Bus() {
  return (
    

      
Bus
            
    
  )
}

function Cart() {
  return (
    

      
Cart
      
    
  )
}

//ContentHook/ChildSecond.js
import React, {useContext} from 'react'
import {Context} from '../useContent.js'

export function ChildSecond() {
    const AppContext = useContext(Context)

    return (
        

            {AppContext.state.value + 's'}
        
    )
} 

//Store.js
import { produce } from 'immer'

const store = {
  value: 1
}
export { store }

export function reducer(state, action) {
  switch(action.type) {
      case 'ADD_NUM':
          // return { ...state, value: state.value + 1 };
          return produce(state, (draft)=>{
            draft.value++
          })
      case 'REDUCE_NUM':
          // return { ...state, value: state.value - 1 };
          return produce(state, (draft)=>{
            draft.value--
          })
      default: 
          throw new Error();
  }
}

//ContentHook/ChildFirst1
import React, {useContext} from 'react'
import {Context} from '../useContent'

export function ChildFirst1() {
    const AppContext = useContext(Context)

    return (
        

             {
                    AppContext.dispatch({
                        type: "ADD_NUM",
                        payload: {}
                    })
                }
            }>addNum
        
    )
} 

//ContentHook/ChildFirst2
import React, {useContext} from 'react'
import {Context} from '../useContent'

export function ChildFirst2() {
    const AppContext = useContext(Context)

    return (
        

             {
                    AppContext.dispatch({
                        type: "REDUCE_NUM",
                        payload: {}
                    })  
                }
            }>reduceNum
        
    )
}