如何在 react 和 typescript 中使用 context.provider 設置 state？

Question

我正在使用 context.provider usecontext reacthook 來顯示一個對話框。 我在 MainComponent 周圍設置了這個。 對於 context.provider 的 value 屬性，我得到錯誤類型 {setDialogOpen(Open: boolean) => void} is notassignable to type boolean。

我想做什么？ 當用戶單擊主頁或書籍組件中的按鈕時，我想顯示一個對話框。 單擊對話框中的隱藏按鈕時，不應打開對話框。

下面是我的代碼，

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 掛鈎單擊主頁和書籍組件中的按鈕的對話框。 謝謝。

Answer 1

您必須在代碼中修復一些問題。

• 您正在使用默認值false創建上下文。 然后稍后您嘗試將其覆蓋為 object 並因此出現類型錯誤。
• 要解決此問題，請在單獨的文件/幫助程序中創建和導出上下文。 不要把它們當作道具傳下去。
• 在父組件和子組件中導入上下文。
• 您在子組件中的handleClick樂趣缺少arrow 。
• 子組件中的button onClick直接調用 function。 您應該只傳遞 function 參考。

請參閱下面更正的更新代碼。

上下文助手

...
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>
    )
}