我的表单字段分别由反应组件包装。这个反应组件来自 3rd 方模块。我的挑战是设置“ref”并在该组件之外获取“ref”，以便我可以调用.focus它。
注意：我无权修改第 3 方模块的代码。
我不能使用 .createRef 和 .forwardRef 因为无法访问代码，而且重要的是不使用 React 16+
<WrapperComponent/> 这个组件有输入字段，我需要从外部设置焦点。
结构如下：
MyComponent: // Where I want to access the ref
render() {
return (
<div>
<WrapperComponent id={id} />
</div>
);
}
包装组件（这是一个 3rd 方组件，里面有输入字段。可能结构如下）：
render() {
return (<input type="text" id={id} />);
}
一种干净的方法是 fork 第三方组件并使其公开引用。
一种解决方法是扩展第三方组件：
class FirstParty extends ThirdParty {
inputRef = React.createRef();
render() {
const inputReactEl = super.render();
return React.cloneElement(inputReactEl, { ref: this.inputRef });
}
}
另一种解决方法是包装它：
class FirstParty extends Component {
componentDidMount() {
this.inputDomEl = ReactDOM.findDOMNode(this);
}
render() {
return <ThirdParty {...this.props}/>;
}
}
如果使用 React 15，createRef可以将 refs 更改为旧版 refs。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句