如何修复reactjs中“JSX.IntrinsicElements”类型中不存在的属性“JSX.IntrinsicElements”
如何修复reactjs中“JSX.IntrinsicElements”类型中不存在的属性“JSX.IntrinsicElements”
提问于 2021-03-12 01:09:49
index.tsx
const setConfirmDelete = (state, close) => {
return (
<Modal show={state} onHide={close}>
<Modal.Header>
<Modal.Title>Title</Modal.Title>
</Modal.Header>
<Modal.Body>
'This is a body'
</Modal.Body>
<Modal.Footer>
<Button onClick={close} appearance="primary">
Save
</Button>
<Button onClick={close} appearance="subtle">
Cancel
</Button>
</Modal.Footer>
</Modal>
);
}
export default function Users() {
return (
<div>
<gridTable
....
rowFunc={
[name: 'deleteItem',
onClick: () => {
return (<setConfirmDelete state={modal} close={() => setModal(false)} />)
}
]
}>/<gridTable></div>)}我在这里试图做的是显示模式当我点击函数删除，我遇到的错误是Property 'setConfirmDelete' does not exist on type 'JSX.IntrinsicElements'。
我也尝试过这个代码：
onClick={()=> setConfirmDelete({modal, false}) 但它不工作或显示数据
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-03-12 05:38:29
这个特殊的错误“属性'setConfirmDelete‘在’JSX.IntrinsicElements‘类型上不存在”是因为React假定所有小写元素名称都内置在“内部”元素中。所有组件都必须使用大写名称，如SetConfirmDelete。
您不能从return中获取任何onClick。所有事件处理程序函数都是void，不应该返回任何内容。相反，您必须使用state在某个地方设置JSX。
让我们更改您的modal状态，这样我们可以存储模态的内容，而不是true/false (显示/隐藏)，如果没有模态，则存储false。
让我们将SetConfirmDelete变成一个有效的function组件，它接受一个close支柱，这是一个函数。
import React from "react";
import { Modal, Button } from "react-bootstrap";
interface ModalProps {
close: () => void;
// you'll want this is the future
onSubmit: () => void;
}
const ConfirmDeleteModal: React.FC<ModalProps> = ({ close, onSubmit }) => {
return (
<Modal show={true} onHide={close}>
<Modal.Header>
<Modal.Title>Title</Modal.Title>
</Modal.Header>
<Modal.Body>'This is a body'</Modal.Body>
<Modal.Footer>
<Button onClick={onSubmit} appearance="primary">
Save
</Button>
<Button onClick={close} appearance="subtle">
Cancel
</Button>
</Modal.Footer>
</Modal>
);
};
export default function Users() {
// modal state is either an element or false
const [modal, setModal] = React.useState<React.ReactElement | false>(false);
// helper function for setting modal to false
const close = () => setModal(false);
return (
<div>
<div>
<button
onClick={() =>
setModal(
<ConfirmDeleteModal
close={close}
onSubmit={() => console.log("executing delete")}
/>
)
}
>
Delete
</button>
</div>
{
// when the modal is an element, we display it
modal !== false && modal
}
</div>
);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66592792
复制相关文章
相似问题
腾讯云开发者
