多個Typescript錯誤，我不知道如何修復它們-型別不可分配、不兼容等

我正在用 React TypeScript 撰寫我的第一個應用程式，但我似乎無法自己弄清楚一些事情。

我收到很多錯誤，我不明白為什么。這是訊息

Type '{ ref: MutableRefObject<any>; letter: string; onSelectFunction: { onSelectAnswer: (event: SyntheticEvent<HTMLDivElement, Event>) => void; }; }' is not assignable to type 'Content'.
  Types of property 'onSelectFunction' are incompatible.
    Type '{ onSelectAnswer: (event: React.SyntheticEvent<HTMLDivElement, Event>) => void; }' is not assignable to type 'ReactEventHandler<HTMLDivElement>'.
      Type '{ onSelectAnswer: (event: SyntheticEvent<HTMLDivElement, Event>) => void; }' provides no match for the signature '(event: SyntheticEvent<HTMLDivElement, Event>): void'.

這是代碼：Content.tsx

import React, { useRef, useState, useEffect, SyntheticEvent } from 'react';
import { Row, Col } from 'react-bootstrap'
import Box from './Box';
import ButtonCustom from './Button';

function Content() {
    const correctResponse: string = "C";
    const [selectedResponse, setResponse] = useState<string|null>(null);

    const onSubmitAnswer = () => {
        
    };

    const onSelectAnswer = (event: SyntheticEvent<HTMLDivElement, Event>) => {
        console.log(event);        
    };

    const box0 = useRef<any>();
    const box1 = useRef<any>();
    const box2 = useRef<any>();
    const box3 = useRef<any>();
    const box4 = useRef<any>();   
    
    return (
        <div>
            <Box {...{letter: 'A', onSelectFunction: {onSelectAnswer}}} ref={box0}/>
            <Row>
            <Col md>
            <Box {...{ letter: 'A', onSelectFunction: {onSelectAnswer}}} ref={box1} />
            </Col>
            <Col md>
            <Box {...{ letter: 'B', onSelectFunction: {onSelectAnswer}}} ref={box2} />
            </Col>
            <Col md>
            <Box {...{ letter: 'C', onSelectFunction: {onSelectAnswer}}} ref={box3} />
            </Col>
            <Col md>
            <Box {...{ letter: 'D', onSelectFunction: {onSelectAnswer}}} ref={box4} />
            </Col>
            </Row>
            <br/>
            { selectedResponse === correctResponse ? <ButtonCustom {...{onSubmitAnswer: onSubmitAnswer, resolvedQuestion: 1}}/> : <ButtonCustom {...{onSubmitAnswer: onSubmitAnswer, resolvedQuestion: 0}}/> }
        </div>
    );
}

export default Content;

盒子.tsx

import React, { ReactEventHandler } from 'react';
import './Box.css';

type Content = {
  onSelectFunction: ReactEventHandler<HTMLDivElement>,
  letter: string
}

const Box = React.forwardRef<HTMLDivElement, Content>((props, ref) => {
  return (
    <div ref={ref} className="box" onSelect={props.onSelectFunction}>
      <span className="box-content">
        {props.letter}
      </span>
    </div>
  );
});

export default Box;

我真的不知道該怎么做才能修復它們。

我嘗試將 onSelectFunction 的型別更改為

React.SyntheticEvent<HTMLDivElement, Event>

但后來我又收到了另一個錯誤。

作為初學者，如果有人能向我解釋為什么會拋出這些錯誤以及如何修復它們，我會非常高興。

打字稿游樂場

uj5u.com熱心網友回復：

這是作業。請注意，我將名稱更改type Content為TContent以避免混淆和更好的可讀性

type TContent = {
  onSelectFunction: ReactEventHandler<HTMLDivElement>,
  letter: string
}

const Box = React.forwardRef<HTMLDivElement, TContent>((props, ref) => {
  return (
    <div ref={ref} className="box" onSelect={props.onSelectFunction}>
      <span className="box-content">
        {props.letter}
      </span>
    </div>
  );
});




function Content() {
    const correctResponse: string = "C";
    const [selectedResponse, setResponse] = useState<string|null>(null);

    const onSubmitAnswer = () => {
        
    };

    const onSelectAnswer = (event: SyntheticEvent<HTMLDivElement, Event>) => {
        console.log(event);        
    };

    const box0 = useRef<any>();
    
    return (
        <div>
            <Box letter="A" onSelectFunction= {onSelectAnswer} ref={box0}/>
        </div>
    );
}

export default Content;

uj5u.com熱心網友回復：

如果你想使用傳播道具，這里是解決方案：

    const propsB:TContent = {
            letter:"B",
            onSelectFunction:onSelectAnswer
        }
    
        return (
            <div>
                <Box letter="A" onSelectFunction= {onSelectAnswer} ref={box0}/>
                <Box {...propsB} ref={box1}/>

                <Box {...{
                letter: "C",
                onSelectFunction: onSelectAnswer
            }} ref={box0} />

            </div>
        );

標籤：反应 打字稿

上一篇：文本欄位更改值未在OnSubmit中更新-React-Hook-Form和ReactJs

下一篇：比較兩個物件陣列并得到差異