[英]How to set the state using context.provider in react and typescript?
i am using context.provider usecontext reacthook to show a dialog.我正在使用 context.provider usecontext reacthook 来显示一个对话框。 i set this around MainComponent.
我在 MainComponent 周围设置了这个。 For the value attribute of context.provider i get error type {setDialogOpen(Open: boolean) => void} is not assignable to type boolean.
对于 context.provider 的 value 属性,我得到错误类型 {setDialogOpen(Open: boolean) => void} is notassignable to type boolean。
what i am trying to do?我想做什么? I want to display a dialog when user clicks either a button in home or books component.
当用户单击主页或书籍组件中的按钮时,我想显示一个对话框。 on clicking hide button in dialog the dialog shouldnt be open.
单击对话框中的隐藏按钮时,不应打开对话框。
below is my code,下面是我的代码,
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>
)
}
I have tried something like below,我尝试过类似下面的方法,
return (
<DialogContext.Provider value={{
setShowDialog(open)}}>//still get a error
{showDialog && <Dialog DialogContext={DialogContext}/>
)
Could someone help me fix this or provide a better approach to show the dialog on clicking a button in home and books component using usecontext hook.有人可以帮我解决这个问题或提供更好的方法来显示使用 usecontext 挂钩单击主页和书籍组件中的按钮的对话框。 thanks.
谢谢。
There are few issues that you have to fix in your code.您必须在代码中修复一些问题。
false
.false
创建上下文。 Then later you try to override it to an object and hence the type error.handleClick
fun in child component is missing an arrow
.handleClick
乐趣缺少arrow
。button onClick
in child component is directly calling the function.button onClick
直接调用 function。 You should pass just the function reference. See the updated code with corrections below.请参阅下面更正的更新代码。
context helper上下文助手
...
type ContextProps = {
setDialogOpen?: (open: boolean) => void,
};
export const DialogContext = React.createContext<ContextProps>({});
MainComponent主要组件
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)}}>
...
Home & Book Component家庭和书籍组件
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>
)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.