reactjs - onClick kan inte tilldelas typen 'IntrinsicAttributes' fel i TypeScript React

Jag har denna kod för en komponent:

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;

Komponenten FeedbackButton ser ut så här:

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;

På raden <FeedbackButton onClick={() => setIsOpen(!isOpen)} /> får jag felet Type '{ onClick:() => void; }' is not assignable to type 'IntrinsicAttributes'. Property 'onClick' does not exist on type 'IntrinsicAttributes'.

Jag sökte upp det och försökte fixa det med FunctionalComponent, men jag fick samma fel. Hur kan jag få detta onClick med useState att fungera?

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

något som detta borde fungera för dig ännu bättre, du kan kopiera typen från button onclick till dina props och få bättre typning om det behövs

Svar #2

@tonakai fixar problemet bra!

Men väldigt ofta är onClick-logiken "ägd" av föräldern, och det är mer naturligt att barnet inte "vet" något om klick som föräldern hanterar.

Till exempel, när du har en barnkomponent som är implementerad på flera ställen, och endast vissa ställen kräver onClick.

Så jag brukar ibland linda den som

<div onClick=...>
  <CustomComponent></CustomComponent>
</div>

Detta har nackdelen att lägga till en extra div i DOM:en, men kan vara värt det för komponentavkoppling.

Relaterade artiklar