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 复制到你的道具，如果需要的话可以更好地打字

onClick 无法分配给 TypeScript React 中的类型 'IntrinsicAttributes' 错误

onClick not assignable to type 'IntrinsicAttributes' error in TypeScript React

typescript

reactjs

tsx

react-hooks