React+TypeScript开发onSelectFunction类型不匹配报错如何解决？

触发原因 #

你遇到的类型报错完全是因为传参格式和组件定义的类型不匹配导致的：

• 你在Content.tsx中给Box组件传递onSelectFunction属性时，把onSelectAnswer函数用对象{onSelectAnswer}包裹了，相当于你传的是一个{ onSelectAnswer: 函数 }的结构
• 但Box.tsx里定义的Content类型要求onSelectFunction必须是直接的ReactEventHandler<HTMLDivElement>函数类型，不是包含函数的对象，因此TS校验直接抛出不匹配错误。

另外补充一个实践建议：div原生的onSelect事件仅在文本内容被选中时触发，如果你要实现点击选项选答案的交互，替换为onClick事件更符合需求。

修复步骤 #

第一步：修正Content.tsx的传参 #

把所有Box组件的onSelectFunction传参从包裹对象改成直接传递函数即可，修改后的代码如下：

// Content.tsx return部分代码
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>
);

第二步（可选，优化交互）：修改Box组件的触发事件为点击 #

如果要实现点击选答案的效果，修改Box.tsx的事件绑定和类型定义即可：

// Box.tsx 完整修改后代码
import React, { MouseEventHandler } from 'react';
import './Box.css';

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

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

export default Box;

修改完成后所有TS报错都会消失，交互也符合答题选项的使用逻辑。

内容的提问来源于stack exchange，提问作者user14399919