如何在Class组件中将React forwardRef与react-redux一起使用？

问题描述

如何在类组件中将forwardRef与react-redux的连接功能一起使用？

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 } 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,{ forwardRef: true })(ChildComponent);

我不知道如何在类组件中使用React.forwardRef()。

解决方法

connect函数是一个高阶组件。您可以按照forwarding refs in higher order components中的步骤进行操作，以更好地了解HOC如何将ref转发给包装的组件。

要点是，react ref不是prop，它像react key一样特殊，但是您可以在必要时将它们作为prop传递。 { forwardRef: true }的{​​{1}}选项只会将connect转发到包装的组件，在这种情况下为ref。相反，您实际上想进一步“传递”引用并将其附加到ChildComponent的子组件中。

1. 在父组件中创建引用。
2. 将引用作为命名道具ChildComponent传递给子组件。
3. （a）分解/访问子组件中的命名引用，（b）附加到内部子组件上。

父组件

forwardedRef

子组件

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不需要引用，因此无需指定{{1} }中的ChildComponent HOC配置参数中的}。