开发者问题收集

转发的引用为空

2020-03-11
1020

我来自这个帖子: 如何在基于类的组件中使用 React.forwardRef? 我也仔细阅读了文档,但我的 ref 转发似乎不起作用。

创建 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 的情况下转发 ref,则 TextEditor 中不存在 ref,一切正常。

有人知道我做错了什么吗?

2个回答

您需要将Ref传递给已连接的组件(我没有使用Redux尝试,但是有了另一个HOC,我希望它对您有用):

730968429
i.brod
2020-03-11

connect 将创建一个具有其自己的 ref 的全新组件。但是,React Redux 实际上为 connect 提供了一个 forwardRef 选项,该选项应该可以允许转发 ref。

If {forwardRef : true} has been passed to connect, adding a ref to the connected wrapper component will actually return the instance of the wrapped component.

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

kmui2
2020-03-11