如何在Class组件中使用带有React redux的React forwardRef

Question

如何将类组件中的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, null, { forwardRef: true })(ChildComponent);

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

Answer 1

connect函数是一个高阶组件。您可以按照这里的步骤在高阶组件中转发ref，以更好地了解HOC如何将ref转发到封装组件。

要点是，反应裁判不是道具，它就像反应键一样特别，但你可以在必要时将其作为道具传递。connect的{ forwardRef: true }选项将仅将ref转发到被封装的组件，在本例中为ChildComponent。相反，你想实际"；通过"；ref，并将其附加到CCD_ 9的子组件。

1. 在父组件中创建引用
2. 将ref作为命名道具forwardedRef传递给子组件
3. (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)
}
}

注意：由于我们没有将ref附加到ParentComponent，并且ChildComponent不需要它，因此没有必要在connectHOC配置参数中指定forwardRef: true(给定所提供的代码示例(