onClick 不能分配给 TypeScript React 中的类型“IntrinsicAttributes”错误

Question

我有一个组件的代码：

Feedback.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 组件如下所示：

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 复制到您的道具，并在需要时更好地输入