如何在 React < 16 中获取包装元素的 'ref'？

Question

我的表单字段分别由反应组件包装。这个反应组件来自 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>
        );
    }

Wrapper 组件（这是一个内部有输入字段的第 3 方组件。结构可能如下所示）：

    render() {
        return (<input type="text" id={id} />);
    }

Answer 1

您可以获取自己的引用 div 并编写一些代码以在其子节点中找到您需要的节点。

因为你有一个 id 你可以 window.document.getElementById(id) 访问那个节点。

Answer 2

一种干净的方法是 fork 第三方组件并使其暴露一个 ref。

一种解决方法是扩展第三方组件：

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。

如何在 React < 16 中获取包装元素的 'ref'？

How to get 'ref' of wrapped element in react < 16?

ref

reactjs