- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试将 HOC 从 javascript 提升到 typescript。 HOC 在使用它的组件中添加了一个确认对话框,提供了一个 showConfirmationDialog
属性,它在被调用时显示对话框并在点击确认时运行回调。
代码编译正常,但是当我在浏览器中打开应用程序时,出现错误“无效的 Hook 调用。 Hook 只能在函数组件的主体内部调用。”
该代码在 javascript 中运行良好。我无法理解该错误,并且我已按照所有建议的步骤进行操作,但没有任何解决方法。
ConfirmationDialog/index.tsx
type ExtraProps = {
showConfirmationDialog: (params: RequiredParameters) => void
}
type ConfirmationCallback = () => void
interface RequiredParameters {
dialogTitle: string,
dialogContent: string,
confirmationButtonText: string,
onConfirm: ConfirmationCallback
}
const WithConfirmationDialog = <P extends ExtraProps>(Component: React.ComponentType<P>) => {
const [open, setOpen] = useState(false)
const [title, setTitle] = useState('')
const [content, setContent] = useState('')
const [confirmationButtonText, setConfirmationButtonText] = useState('')
const [onConfirm, setOnConfirm] = useState<ConfirmationCallback>()
const handleShow = (params: RequiredParameters) => {
setTitle(params.dialogTitle)
setContent(params.dialogContent)
setConfirmationButtonText(params.confirmationButtonText)
setOnConfirm(params.onConfirm)
setOpen(true)
}
const handleConfirm = () => {
if (onConfirm) {
onConfirm()
}
setOpen(false)
}
const handleClose = () => {
setOpen(false)
}
const ComponentWithConfirmationDialog = (props: P) => (
<>
<Dialog
open={open}
onClose={handleClose}
>
<DialogTitle>{title}</DialogTitle>
<DialogContent>
<DialogContentText>{content} </DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={handleConfirm} color="primary">
{confirmationButtonText}
</Button>
<Button onClick={handleClose} color="primary">
Cancel
</Button>
</DialogActions>
</Dialog>
<Component {...props} showConfirmationDialog={handleShow} />
</>
)
return ComponentWithConfirmationDialog
}
export default WithConfirmationDialog
单击另一个组件中的按钮后使用代码的示例:
import withConfirmationDialog from '../ConfirmationDialog'
const MyComponent = (props) => {
const classes = useStyles();
const handleDeleteBooking = () => {
// ...make api calls and handle results...
};
// left out everything else for brevity
return (
<Fab // material-ui
className={classes.deleteButton}
aria-label="delete"
onClick={(e) => {
props.showConfirmationDialog({
dialogTitle: "Delete Booking",
dialogContent: "Are you sure you want to delete this booking?",
confirmationButtonText: "Delete",
onConfirm: handleDeleteBooking,
});
}}
>
<DeleteIcon /> // material-ui
</Fab>
);
};
export default withConfirmationDialog(MyComponent)
我用来构建这个的主要指南可以是 found here .运行 npm start
时编译正常,错误永远不会显示在终端中。我只在我的浏览器中看到“无效 Hook 调用”消息,以及指向我第一次在我的 HOC 中使用 useState(false
的堆栈跟踪。
如有任何帮助,我们将不胜感激!
最佳答案
这里的问题是您的 HOC 正在函数组件 ComponentWithConfirmationDialog
之外调用 Hook 。所有钩子(Hook)都必须在组件内部调用,而不是外部。您的 HOC 函数本身不是组件。
为了解决这个问题,您需要将 ComponentWithConfirmationDialog
上方的所有内容移动到其中,例如:
const WithConfirmationDialog = <P extends ExtraProps>(Component: React.ComponentType<P>) => {
const ComponentWithConfirmationDialog = (props: P) => {
const [open, setOpen] = useState(false)
const [title, setTitle] = useState('')
const [content, setContent] = useState('')
const [confirmationButtonText, setConfirmationButtonText] = useState('')
const [onConfirm, setOnConfirm] = useState<ConfirmationCallback>()
const handleShow = (params: RequiredParameters) => {
setTitle(params.dialogTitle)
setContent(params.dialogContent)
setConfirmationButtonText(params.confirmationButtonText)
setOnConfirm(params.onConfirm)
setOpen(true)
}
const handleConfirm = () => {
if (onConfirm) {
onConfirm()
}
setOpen(false)
}
const handleClose = () => {
setOpen(false)
}
return (
<>
<Dialog
open={open}
onClose={handleClose}
>
<DialogTitle>{title}</DialogTitle>
<DialogContent>
<DialogContentText>{content} </DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={handleConfirm} color="primary">
{confirmationButtonText}
</Button>
<Button onClick={handleClose} color="primary">
Cancel
</Button>
</DialogActions>
</Dialog>
<Component {...props} showConfirmationDialog={handleShow} />
</>
)
}
return ComponentWithConfirmationDialog
}
export default WithConfirmationDialog
关于reactjs - react 高阶组件在 typescript 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62392542/
我正在使用缺少 findall 的高阶 Prolog 变体. 还有一个关于实现我们自己的问题 findall这里:Getting list of solutions in Prolog . 低效的实现
我正在尝试使用 Flow 类型创建高阶组件,但在处理返回的组件类型时遇到了问题。 最小的例子: /* @flow */ import React from 'react'; type Props =
我想抽象化传递到我的数组的 reduce() 函数中的函数,使该函数成为通用的“最强大的 Array reducer”。为此,我想在 reduce() 参数中传入不同的特定函数,以便能够指定比较标准。
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题,以便用事实和引用来回答。 关闭 7 年前。
将宏名称作为其他宏的参数来模拟高阶函数是否“安全”? 即我应该注意哪里才不会搬起石头砸自己的脚? 以下是一些片段: #define foreach_even(ii, instr) for(int ii
谁能给我解释一下下面的代码是怎么回事。该函数正在接收 n 作为参数,那么 m 来自哪里?整个代码令人困惑。如果有人可以解释一下? function greaterThan(n) { retur
我有一个 list ,例如: ["Hello", "Goodbye"] 我想使用 map在名单上; 我已经成功使用 map前: f = ("example" ++) 那么: map f ["Hello
我正在尝试通过在线书籍“Learn you a Haskell”来学习一些 Haskell,并且我有一个关于高阶函数的问题。 我看到了some examples我想做一些更高级的功能,但我不知道为什么
我正在学习更深入的 redux,并且在处理高阶 reducer 时遇到一些麻烦。 我试图使用一个简单的分页示例来了解它是如何工作的。 NB:下面的代码只是 Nodejs 上下文中 redux 的一个快
高阶函数是什么呢? 高阶函数英文名叫:Higher Order function ,一个函数可以接收一个或多个函数作为输入,或者输出一个函数,至少满足上述条件之一的函数,叫做高阶函数。 前言
我写了一个小的 R 代码片段来遍历包含马尔可夫链实现的向量,并返回观察到的给定顺序的转换。具体而言,假设我们对状态空间 $\mathcal{S}$ 的 2 次转换感兴趣。最终目标是以方便的形式存储计数
如您所见,我很难表达标题中的问题。 我有一个包含 li 的 ul,它本身包含一个 ul 和它自己的 li。 我希望仅第一个 li 元素而不是第二个 ul 中的元素。 如果你看this fiddle (
我是一名优秀的程序员,十分优秀!