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

Question

我正在使用 context.provider usecontext reacthook 来显示一个对话框。我把这个设置在MainComponent周围。对于 context.provider 的值属性，我获取错误类型 {setDialogOpen（Open： boolean） => void} 不可分配给布尔类型。

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

下面是我的代码，

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>

    )

 }

我尝试了如下方法，

return (

    <DialogContext.Provider value={{ 

        setShowDialog(open)}}>//still get a error

            {showDialog && <Dialog DialogContext={DialogContext}/>

)

有人可以帮我解决这个问题，或者提供更好的方法来显示使用usecontext hook单击主页和书籍组件中的按钮的对话框。谢谢。

Answer 1

您必须在代码中修复一些问题。您正在使用缺省值 创建上下文。然后稍后您尝试将其重写为对象，从而导致类型错误。false要解决此问题，请在单独的文件/帮助程序中创建和导出上下文。不要把它们作为道具传下去。导入父组件和子组件中的上下文。您在子组件中的乐趣缺少.handleClickarrowin 子组件直接调用函数。您应该只传递函数引用。button onClick请参阅更新后的代码，并在下面进行更正。上下文帮助程序...type ContextProps = {&nbsp;&nbsp; &nbsp; setDialogOpen?: (open: boolean) => void,&nbsp; };export const DialogContext = React.createContext<ContextProps>({});主组件import {DialogContext} from '../contextHelper';function MainComponent() {&nbsp; &nbsp; // const DialogContext = React.createContext(false); //<---- remove this&nbsp; &nbsp; let [showDialog, setShowDialog] = React.useState(false);&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <DialogContext.Provider value={{&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setDialogOpen: (open: boolean) => setShowDialog(open)}}>...家庭和书籍组件import {DialogContext} from '../contextHelper';function Home() {&nbsp; &nbsp; const dialogContext= React.useContext(DialogContext);&nbsp; &nbsp; const handleClick = () => {&nbsp; &nbsp; &nbsp; &nbsp; dialogContext.setDialogOpen(true);&nbsp; &nbsp; }&nbsp; &nbsp; return (&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <button onClick={handleClick}>button1</button>&nbsp; &nbsp; )}import {DialogContext} from '../contextHelper';function Books() {&nbsp; &nbsp; const dialogContext= React.useContext(DialogContext);&nbsp; &nbsp; const handleClick = () => {&nbsp; &nbsp; &nbsp; &nbsp; dialogContext.setDialogOpen(true);&nbsp; &nbsp; }&nbsp; &nbsp; return (&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <button onClick={handleClick}>button2</button>&nbsp; &nbsp; )}