时间戳

首页 > 解决方案 > 如何修复 reactjs 中类型“JSX.IntrinsicElements”上不存在属性“setConfirmDelete”

javascript - 如何修复 reactjs 中类型“JSX.IntrinsicElements”上不存在属性“setConfirmDelete”

问题描述

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

但它不起作用或显示数据

标签： javascriptreactjstypescriptnext.js

解决方案

这个特殊的错误“属性 'setConfirmDelete' 在类型 'JSX.IntrinsicElements' 上不存在”是因为 React 假定所有小写元素名称都是内置的，也就是“固有”元素。您的所有组件都必须使用大写名称，例如SetConfirmDelete.

你不能return从onClick. 所有事件处理程序处理函数都是void并且不应该返回任何东西。您必须改为使用state.

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

让我们制作SetConfirmDelete一个有效的 React 组件，它接受一个close作为函数的 prop。

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

代码沙盒链接

推荐阅读