如何修复reactjs中类型'JSX.IntrinsicElements'上不存在属性'setConfirmDelete'答案

【问题标题】：How to fix the Property 'setConfirmDelete' does not exist on type 'JSX.IntrinsicElements' in reactjs如何修复reactjs中类型'JSX.IntrinsicElements'上不存在属性'setConfirmDelete'
【发布时间】：2021-03-12 13:38:29
【问题描述】：

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

但它不起作用或显示数据

【问题讨论】：

标签： javascript reactjs typescript next.js

【解决方案1】：

这个特殊的错误"Property 'setConfirmDelete' does not exist on type 'JSX.IntrinsicElements'" 是因为 React 假定所有小写元素名称都是内置的，也就是“内在”元素。您的所有组件都必须使用大写名称，例如 SetConfirmDelete。

你不能通过onClick 来return 任何 JSX。所有事件处理函数都是void 并且不应该返回任何东西。您必须改为使用state 在某处设置该JSX。

让我们更改您的modal 状态，以便我们存储模态的内容而不是true/false（显示/隐藏），或者如果没有模态，则存储false。

让我们把 SetConfirmDelete 变成一个有效的 React 组件，它接受一个函数 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>
  );
}

Code Sandbox Link

【讨论】：