React项目中TypeScript结合forwardRef的类型定义问题

以下是修改后的完整代码，包含正确的类型声明：

import React, { forwardRef } from 'react';

interface Props {
    thunkFetchMovies: any;
}

// forwardRef泛型：第一个是ref绑定的DOM元素类型，第二个是组件Props类型
const SearchInput = forwardRef<HTMLDivElement, Props>((props, ref) => {
    const { thunkFetchMovies } = props;

    return (
        <div className="TopBar__center">
            {/* 将ref绑定到目标div上 */}
            <div className="search" ref={ref}></div>
        </div>
    );
});

export default SearchInput;

关键类型说明 #

• forwardRef<HTMLDivElement, Props>：明确指定两个核心类型：
  • 第一个泛型参数HTMLDivElement：定义ref指向的DOM元素类型，确保外部使用ref时能获得正确的DOM操作提示。
  • 第二个泛型参数Props：复用你原本定义的组件属性接口，保证props的类型校验正常工作。
• 组件接收的ref参数：无需手动声明类型，forwardRef会自动根据泛型推导为ForwardedRef<HTMLDivElement>，兼容null和回调式ref两种写法。

父组件使用示例 #

外部组件可以通过useRef获取目标DOM元素并操作：

import React, { useRef } from 'react';
import SearchInput from './SearchInput';

const ParentComponent = () => {
    const searchDivRef = useRef<HTMLDivElement>(null);

    const modifySearchDiv = () => {
        if (searchDivRef.current) {
            // 直接操作目标div，比如修改类名或样式
            searchDivRef.current.classList.add('search--active');
        }
    };

    return (
        <div>
            <SearchInput thunkFetchMovies={/* 传入你的thunk函数 */} ref={searchDivRef} />
            <button onClick={modifySearchDiv}>修改搜索框样式</button>
        </div>
    );
};

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