Javascript 如何在react和typescript中使用context.provider设置状态？

我正在使用context.provider usecontext reacthook显示对话框。我围绕主组件设置了这个。对于context.provider的value属性，我得到的错误类型{setDialogOpen（Open:boolean）=>void}不能分配给boolean类型

我想做什么？ 我想在用户单击home或books组件中的按钮时显示一个对话框。单击对话框中的隐藏按钮时，对话框不应打开

下面是我的代码

function MainComponent() {
    const DialogContext = React.createContext(false);
    let [showDialog, setShowDialog] = React.useState(false);
    return (
        <DialogContext.Provider value={{ 
            setDialogOpen: (open: boolean) => setShowDialog(open)}}>//get error
            {showDialog && <Dialog DialogContext={DialogContext}/>
            <Route 
                path="/items">
                <Home DialogContext={DialogContext}/>
            </Route>
            <Route
                path="/id/item_id">
                <Books DialogContext={DialogContext}/>
            </Route>
        </DialogContext.Provider>
    )
}

function Home({DialogContext} : Props) {
    const dialogContext= React.useContext(DialogContext);
    const handleClick = (dialogContext: any) {
        dialogContext.setDialogOpen(true);
    }
    return ( 
        <button onClick={handleClick(dialogContext)}>button1</button>
    )
}

function Books({DialogContext} : Props) {
    const dialogContext= React.useContext(DialogContext);
    const handleClick = (dialogContext: any) {
        dialogContext.setDialogOpen(true);
    }
    return ( 
        <button onClick={handleClick(dialogContext)}>button2</button>
    )
}

function Dialog({DialogContext}: Props) {
    return(
        <div>
            //sometext
            <button> hide</button>
        </div>
    )
 }

function main组件（）{
const DialogContext=React.createContext（false）；
let[showDialog，setShowDialog]=React.useState（false）；
返回(
setShowDialog（打开）}>//获取错误
{showDialog&&
)
}
函数主页（{DialogContext}:Props）{
const dialogContext=React.useContext（dialogContext）；
const handleClick=（dialogContext:any）{
dialogContext.setDialogOpen（true）；
}
报税表（
按钮1
)
}
函数书（{DialogContext}:Props）{
const dialogContext=React.useContext（dialogContext）；
const handleClick=（dialogContext:any）{
dialogContext.setDialogOpen（true）；
}
报税表（
按钮2
)
}
函数对话框（{DialogContext}:Props）{
返回(
//一些文字
隐藏
)
}

我试过下面的方法

return (
    <DialogContext.Provider value={{ 
        setShowDialog(open)}}>//still get a error
            {showDialog && <Dialog DialogContext={DialogContext}/>
)

返回(
//还是会出错
{showDialog&&
)

---

是否有人可以帮助我解决这个问题，或者提供一种更好的方法，使用usecontext钩子在home and books组件中单击按钮时显示对话框。谢谢。

代码中有一些问题需要解决

• 您正在使用默认值

  false

  创建上下文。然后，您尝试将其覆盖到一个对象，从而导致类型错误
• 要解决此问题，请在单独的文件/helper中创建并导出上下文。不要将其作为道具传递
• 导入父组件和子组件中的上下文
• 您的

  handleClick

  fun-in-child组件缺少

  箭头

• 子组件中的onClick按钮直接调用函数。您应该只传递函数引用

请参阅下面的更新代码和更正

上下文帮助程序

。。。
键入ContextProps={
setDialogOpen？：（打开：布尔）=>void，
};
export const DialogContext=React.createContext（{}）；

主要组件

从“../contextHelper”导入{DialogContext}；
函数main component（）{
//const DialogContext=React.createContext（false）//
...

主页和书本组件

从“../contextHelper”导入{DialogContext}；
函数Home（）{
const dialogContext=React.useContext（dialogContext）；
常量handleClick=（）=>{
dialogContext.setDialogOpen（true）；
}
报税表（
按钮1
)
}
从“../contextHelper”导入{DialogContext}；
功能书（）{
const dialogContext=React.useContext（dialogContext）；
常量handleClick=（）=>{
dialogContext.setDialogOpen（true）；
}
报税表（
按钮2
)
}

谢谢。是否可以在整个应用程序中使用此选项。例如，包装到应用程序并单击home或books组件中的按钮会打开对话框？是的，您可以导入上下文并在作为上下文提供程序的子组件的所有组件中使用它…在您的情况下，home和books组件..谢谢。在handleClick中使用diasetDialogOpen（true）无法调用可能是未定义错误的对象。