带有打字稿的上下文 Api

Question

我对 typescript 和 react 结合起来有点陌生。所以在这里我有上下文和简单的模态函数和状态，我想在全局范围内使用它们，但它不允许我在 HomeContext.Provider 值中传递它们。界面好吗？

import React,{useState} from "react";
import { useHistory } from "react-router-dom"
 const HomeContext = React.createContext<Props | boolean>(null);

interface Props{
  setIsModalOpenTwo: (value: boolean) => void;
  closeModalOne: (value: boolean) => void;
  closeModalTwo: (value: boolean) => void;
  setIsModalOpenOne: (value: boolean) => void;
  modalIsOpenOne: boolean;
  openModalTwo: (value: boolean) => void;
  openModalOne: (value: boolean) => void;
  modalIsOpenTwo: boolean;
}

export const HomeProvider:React.FC<Props> = ({ children } ) => {

    const [modalIsOpenOne, setIsModalOpenOne] =useState(false)
    const [modalIsOpenTwo, setIsModalOpenTwo] =useState(false)


    const  closeModalOne=()=>{
        setIsModalOpenOne(false);
      }
      const  openModalOne=()=>{
        setIsModalOpenOne(true);
      }

      const  closeModalTwo=()=>{
        setIsModalOpenTwo(false);
      }
      const  openModalTwo=()=>{
        setIsModalOpenTwo(true);
      }
  
  return (

   
    <HomeContext.Provider
      value={{ closeModalOne, openModalOne,setIsModalOpenTwo, modalIsOpenOne, modalIsOpenTwo, setIsModalOpenOne, openModalTwo, closeModalTwo}}
    >
    <>
      {children}
      </>
    </HomeContext.Provider>
  );
}

export { HomeContext,  };

Answer 1

所以，我需要创建一个上下文

 const HomeContext =  React.createContext<Props>({
  modalIsOpenOne: false,
  modalIsOpenTwo: false
  ...
 })