如何在 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

• 要解决此问题，请在单独的文件/帮助程序中创建和导出上下文。不要把它们作为道具传下去。

• 导入父组件和子组件中的上下文。

• 您在子组件中的乐趣缺少.handleClickarrow

• in 子组件直接调用函数。您应该只传递函数引用。button onClick

请参阅更新后的代码，并在下面进行更正。

上下文帮助程序

...

type ContextProps = { 

    setDialogOpen?: (open: boolean) => void,

  };

export const DialogContext = React.createContext<ContextProps>({});

主组件

import {DialogContext} from '../contextHelper';

function MainComponent() {

    // const DialogContext = React.createContext(false); //<---- remove this

    let [showDialog, setShowDialog] = React.useState(false);

    return (

        <DialogContext.Provider value={{ 

            setDialogOpen: (open: boolean) => setShowDialog(open)}}>

...

家庭和书籍组件

import {DialogContext} from '../contextHelper';

function Home() {

    const dialogContext= React.useContext(DialogContext);

    const handleClick = () => {

        dialogContext.setDialogOpen(true);

    }

    return ( 

        <button onClick={handleClick}>button1</button>

    )

}

import {DialogContext} from '../contextHelper';

function Books() {

    const dialogContext= React.useContext(DialogContext);

    const handleClick = () => {

        dialogContext.setDialogOpen(true);

    }

    return ( 

        <button onClick={handleClick}>button2</button>

    )

}