TypeScript React中如何不向子组件传参即可绑定触发鼠标事件

问题本质说明 #

你给自定义React组件直接绑定的事件不会自动挂载到内部DOM元素上，这类传入的事件只会作为普通props存在，必须手动做透传绑定才会生效。TypeScript报错是因为你的Tile组件初始的props类型定义中，没有包含你传入的onHover属性，所以类型校验不通过。

注意 #

React 没有内置名为onHover的标准鼠标事件，实现悬停逻辑推荐使用原生标准事件onMouseEnter（仅鼠标进入当前元素时触发）或onMouseOver（鼠标经过当前元素及内部子元素时都会触发）。

可行实现方案 #

方案1：显式声明需要接收的事件属性

适合仅需要支持少量特定事件的场景，直接在组件props类型中添加对应事件声明，再绑定到内部根DOM上即可：

import type { MouseEventHandler } from 'react';

export const Tile: React.FC<{ 
  name: string,
  onMouseEnter: MouseEventHandler<HTMLDivElement>
}> = ({ name, onMouseEnter }) => {
    return (
        <div className="tile-wrapper" onMouseEnter={onMouseEnter}>
            <h1 className="tile-header">
                {name}
            </h1>
        </div>
    )
}

使用方式：

const handleHover = () => console.log('悬停触发')
<Tile onMouseEnter={handleHover} name="Random name"/>

方案2：扩展原生属性类型，自动透传所有属性

适合需要支持div标签所有原生属性（包括各类事件、class、id等）的场景，不需要逐个声明属性：

import type { ComponentProps } from 'react';

// 继承div全部原生属性，叠加自定义的name属性
type TileProps = ComponentProps<'div'> & {
  name: string
}

export const Tile: React.FC<TileProps> = ({ name, ...restProps }) => {
    return (
        // 所有透传属性直接绑定到根div，自动生效
        <div className="tile-wrapper" {...restProps}>
            <h1 className="tile-header">
                {name}
            </h1>
        </div>
    )
}

这种写法下你给Tile组件传入任意div支持的原生属性都不会触发TS报错，且会自动绑定到内部根元素生效。

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