转发的引用为空
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.
kmui2
2020-03-11