转发的参考为空

Question

我来自这个帖子：How to use React.forwardRef in a class based component? 我也非常仔细地浏览了文档，但我的 ref 转发似乎根本不起作用。

要创建引用的组件：

class TextEditor extends Component {
    constructor(props: Props) {
        this.editor = createRef();
    }

    render() {
        console.log(this.editor) // -> This is always empty
        return (
            <BaseEditor ref={this.editor}/>
        );
    }
}

接收 ref 的组件：

class BaseEditor extends Component<Props> {

    render() {
        return (
            <Editor ref={this.props.innerRef}/>
        );
    }
}

const BaseEditorForwardRef = React.forwardRef((props: any, ref: any) => (
    <BaseEditor {...props} innerRef={ref} />
));

export default connect(mapStateToProps, mapDispatchToProps)(BaseEditorForwardRef)

我觉得一切都在它应该的地方。然而，如果我在不使用React.forwardRef 的情况下转发引用，则引用在TextEditor 中不存在，一切正常。

有人知道我做错了吗？

Answer 1

connect 将使用自己的ref 创建一个全新的组件。然而，React Redux 实际上为connect 提供了一个forwardRef 选项，它应该允许转发引用。

如果 {forwardRef : true} 已传递给连接，则向连接的包装组件添加 ref 将实际返回被包装组件的实例。

https://react-redux.js.org/api/connect#forwardref-boolean

Answer 2

您需要将 ref 传递给已经连接 redux 的组件（我没有尝试使用 redux，但是使用另一个 HOC，我希望它对您有用）：

class BaseEditor extends Component<Props> {

    render() {
        return (
            <Editor ref={this.props.innerRef}/>
        );
    }
}

const Connected = connect(mapStateToProps, mapDispatchToProps)(BaseEditor)


const BaseEditorForwardRef = React.forwardRef((props: any, ref: any) => (
    <Connected {...props} innerRef={ref} />
));

export default BaseEditorForwardRef