TypeScript React 中 onClick 无法分配给类型“IntrinsicAttributes”错误

Question

我有一个组件的代码：

反馈.tsx

import React, { useState } from 'react';
import './Feedback.css';

import FeedbackButton from './FeedbackButton';

function Feedback() {
  const [isOpen, setIsOpen] = useState<boolean>(false)

  return (
    <div className="Feedback">
      <FeedbackButton onClick={() => setIsOpen(!isOpen)} />
    </div>
  );
}

export default Feedback;

该FeedbackButton组件如下所示：

反馈按钮.tsx

import React from 'react';
import feedbackicon from './feedback.svg';
import './Feedback.css';

function FeedbackButton() {
  return (
    <button className="Feedback-button" type="button">
      <img src={feedbackicon} className="Feedback-button-icon" alt="feedback" />
    </button>
  );
}

export default FeedbackButton;

在线<FeedbackButton onClick={() => setIsOpen(!isOpen)} />我收到错误Type '{ onClick: () => void; }' is not assignable to type 'IntrinsicAttributes'. Property 'onClick' does not exist on type 'IntrinsicAttributes'.

我搜索了它并尝试使用FunctionalComponent修复它，但我得到了同样的错误。我怎样才能使这个 onClick 与 useState 一起工作？

Answer 1

function FeedbackButton(props:{onClick:()=>void}) {
  return (
    <button className="Feedback-button" type="button" onClick={props.onClick}>
      <img src={feedbackicon} className="Feedback-button-icon" alt="feedback" />
    </button>
  );
}

像这样的东西应该更适合你，你可以将类型从按钮 onclick 复制到你的道具，并在需要时更好地打字