Reactjs 如何在类组件中使用React forwardRef和React redux？

如何使用带有连接功能的

react-redux

的类内组件

forwardRef

import React, { Component } from 'react';
import ChildComponent from './ChildComponent';

class ParentComponent extends Component {
constructor(props) {
    super(props);
    this.myRef = React.createRef();
}

render() {
    return <ChildComponent ref={this.myRef} />;
}
}

export default ParentComponent;

import React，{Component}来自'React'；
从“/ChildComponent”导入ChildComponent；
类ParentComponent扩展组件{
建造师（道具）{
超级（道具）；
this.myRef=React.createRef（）；
}
render（）{
返回；
}
}
导出默认父组件；

子组件

import React, { Component } from 'react';
import { TextInput } from 'react-native';
import { connect } from 'react-redux';
class ChildComponent extends Component {
render() {
    return <TextInput value={'Hi'} ref={??} />;
}
}

export default connect(null, null, null, { forwardRef: true })(ChildComponent);

import React，{Component}来自'React'；
从“react native”导入{TextInput}；
从'react redux'导入{connect}；
类ChildComponent扩展组件{
render（）{
返回；
}
}
导出默认连接（null，null，null，{forwardRef:true}）（ChildComponent）；

---

我不知道如何在类组件中使用

React.forwardRef（）

。

connect

函数是一个高阶组件。您可以按照中的步骤来更好地理解HOC如何将ref转发到已包装组件

要点是react ref不是道具，它像react键一样特殊，但必要时可以将它们作为道具传递

{forwardRef:true}

连接的

connect

选项将只将

ref

转发到包装的组件，在本例中为

ChildComponent

。相反，您希望进一步“传递”一个ref，并将其附加到

ChildComponent

的子组件

在父组件中创建引用

将ref作为命名的prop，

forwardedRef

传递给子组件

（a） 分解/访问子组件中的命名ref，并（b）附加到内部子组件

父组件

class ParentComponent extends Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef(); // <-- (1)
  }

  render() {
    return <ChildComponent forwardedRef={this.myRef} />; // <-- (2)
  }
}

class ChildComponent extends Component {
  render() {
    const { forwardedRef } = this.props; // <-- (3a)
    return <TextInput ref={forwardedRef} value={'Hi'} />; // <-- (3b)
  }
}

类ParentComponent扩展组件{
建造师（道具）{
超级（道具）；
this.myRef=React.createRef（）//