| 空 | 不明确的',reactjs,typescript,react-redux"/>
时间戳

首页 > 解决方案 > 键入'参考对象' 不可分配给类型 'string | （（（实例：typeof Room_T | null）=> void）| 参考对象| 空 | 不明确的'

reactjs - 键入'参考对象' 不可分配给类型 'string | （（（实例：typeof Room_T | null）=> void）| 参考对象| 空 | 不明确的'

问题描述

当我用connect导出Room组件时，在App组件中，Room组件设置的ref不能正常工作。如果连接被删除，它可以正常工作。以下是部分主要代码演示。``

应用程序.tsx

.....
class App extends React.Component<I_PROPS, I_STATE>{
  private refRoom: React.RefObject<Room_T>;
  constructor(props:any){
     super(props);
     this.refRoom = createRef();
  }
  render() {
    return (
      <Provider store={STORE}>
          <Room ref={this.refRoom} />
       </Provider>
    )
  }
}
export default App;

``

<Room ref={this.refRoom} />

错误：类型 'RefObject<Room_T>' 不可分配给类型 'string | （（（实例：typeof Room_T | null）=> void）| 参考对象 | 空 | 不明确的'。类型“RefObject<Room_T>”不可分配给类型“RefObject”。属性“当前”的类型不兼容。输入'Room_T | null' 不可分配给类型 'typeof Room_T | 无效的'。“Room_T”类型中缺少属性“原型”，但在“typeof Room_T”类型中是必需的

房间.tsx

....
import { connect } from 'react-redux';
....
export class Room_T extends React.Component {
    render() {
        return(
            ....
        )
    }
}
export default connect(mapStateToProps, null, null, {
    forwardRef: true
})(Room_T)

dependencies
    react        = "16.13.1"
    react-redux  = "7.2.1"
    redux        = "4.0.5"
devDependencies
    @types/react       = "16.9.26"
    @types/react-redux = "7.1.8"
    typescript         = "3.9.2"

标签： reactjstypescriptreact-redux

解决方案

这与类如何也可以用作类型有关，但consts不能。当您仅导出基类（不带connect语句）时，您的refRoom: React.RefObject<Room_T>;是有效的，因为它Room_T指的是一个类。

但是，当您导出连接的组件时，它不再是类，因此不能用作类型。相反，您想使用typeof运算符来获取实际类型，例如React.RefObject<typeof Room_T>;

希望这个片段能更好地解释这一点：

type I_PROPS = object
type I_STATE = object

class UnconnectedRoom extends React.Component {
  render() {
    return null
  }
  someMethod() {
    console.log('called method')
  }
}

const ConnectedRoom = connect(
  () => {},
  null,
  (stateProps, dispatchProps) => ({}),
  {
    forwardRef: true,
  }
)(UnconnectedRoom)
class App extends React.Component<I_PROPS, I_STATE> {
  constructor(props: any) {
    super(props)
    this.connectedRoomRef = createRef()
    this.unconnectedRoomRef = createRef()
  }

  render() {
    console.log(this.unconnectedRoomRef.current?.someMethod())
    console.log(this.connectedRoomRef.current?.someMethod())
    return (
      <Provider store={{}}>
        <ConnectedRoom ref={this.connectedRoomRef} />
        <UnconnectedRoom ref={this.unconnectedRoomRef} />
      </Provider>
    )
  }
  private connectedRoomRef: React.RefObject<typeof ConnectedRoom> // This is not a class and hence we're using the `typeof` operator
  private unconnectedRoomRef: React.RefObject<UnconnectedRoom> // This is a class and can also be used as a type
}

推荐阅读