onClick 無法分配給 TypeScript 反應中的類型“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'. 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 復制到你的道具，如果需要的話可以更好地打字