0

如何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()在类组件中使用。

4

1 回答 1

1

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

要点是 react ref 不是道具，它像反应键一样特殊，但您可以在必要时将它们作为道具传递。{ forwardRef: true }选项 forconnect只会将 a 转发ref给被包装的组件，在这种情况下是ChildComponent. 相反，您实际上希望进一步“传递” ref 并将其附加到ChildComponent.

  1. 在父组件中创建 ref。
  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)
  }
}

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

于 2020-10-21T05:15:37.077 回答