React+Redux+TypeScript中getWrappedInstance类型报错接口咨询

嘿，我之前也碰到过这个烦人的TypeScript报错！问题出在TypeScript默认不知道你用this.refs.items获取的是被Redux connect包裹后的组件实例，所以它认不出getWrappedInstance()方法。不过不用慌，Redux其实已经给我们准备了对应的类型定义，不用完全自己从零写接口，跟着下面的步骤来就行：

第一步：先确保connect配置对了 #

要能拿到内部组件的实例，首先得在connect的时候开启对应的选项，不同版本的react-redux配置有点不一样：

• 如果你用的是react-redux v5及更早版本：得在connect的第四个参数（配置项）里加withRef: true

  const ConnectedItems = connect(
    mapStateToProps,
    mapDispatchToProps,
    null,
    { withRef: true } // 这个配置不能少！
  )(ItemsComponent);
  

• 要是用的是react-redux v6+：更推荐用forwardRef配合forwardRef: true的配置，这是现在的标准写法

  const ConnectedItems = connect(
    mapStateToProps,
    mapDispatchToProps,
    null,
    { forwardRef: true } // 关键配置
  )(React.forwardRef((props, ref) => <ItemsComponent {...props} ref={ref} />));
  

第二步：给refs指定正确的类型 #

接下来就是给你的items ref加上正确的类型声明，这里有两种常用的方式：

方式一：用react-redux自带的ConnectedComponent类型 #

先从react-redux里导入ConnectedComponent，然后给你的ref指定类型就行：

import { ConnectedComponent } from 'react-redux';
import ItemsComponent from './ItemsComponent';

// 先定义好你的Connected组件类型
type ConnectedItemsType = ConnectedComponent<typeof ItemsComponent, {}>;

// 然后在类组件里声明ref
class ParentComponent extends React.Component {
  itemsRef = React.createRef<ConnectedItemsType>();

  componentDidMount() {
    // 现在TypeScript就不会报错啦，还能自动提示类型
    const wrappedInstance = this.itemsRef.current?.getWrappedInstance();
    if (wrappedInstance) {
      // 这里可以放心调用内部组件的方法或者访问属性
    }
  }

  render() {
    return <ConnectedItems ref={this.itemsRef} />;
  }
}

方式二：自己定义接口（更灵活的情况） #

如果你不想依赖ConnectedComponent，也可以自己写个简单的接口来描述这个带getWrappedInstance()的实例：

// 定义一个通用接口，能返回指定类型的内部组件实例
interface WrappedComponentRef<T> {
  getWrappedInstance(): T;
}

// 在类组件里使用这个接口
class ParentComponent extends React.Component {
  // 指定ref的类型为WrappedComponentRef<你的内部组件类型>
  itemsRef = React.createRef<WrappedComponentRef<ItemsComponent>>();

  componentDidMount() {
    const wrappedInstance = this.itemsRef.current?.getWrappedInstance();
    if (wrappedInstance) {
      // 这里操作内部组件是类型安全的
    }
  }

  render() {
    return <ConnectedItems ref={this.itemsRef} />;
  }
}

最后提个小建议 #

如果你还在使用旧的字符串refs（比如this.refs.items），建议赶紧换成createRef或者函数组件里的useRef，因为字符串refs已经被标记为过时了，而且TypeScript对它们的类型支持确实不太好。另外别忘了确保你已经装了@types/react-redux包，不然这些Redux的类型定义都用不了哦！

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