Question

我的表单字段分别由react组件包装。该react组件来自第三方模块。我的挑战是设置“ ref”并在该组件之外获取该“ ref”，以便可以在其上调用.focus。

注意：我无权修改第三方模块的代码。

我不能使用.createRef和.forwardRef，因为它们无法访问代码，重要的是不使用React 16 +

<WrapperComponent/>该组件具有输入字段，我需要在该输入字段上从外部设置焦点。

结构如下：

    MyComponent: // Where I want to access the ref

    render() {
        return (
            <div>
                <WrapperComponent id={id} />
            </div>
        );
    }

包装器组件（这是第三方组件，内部具有输入字段。结构如下）：

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

Answer 1

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

由于您拥有id，因此您可以window.document.getElementById(id)来访问该节点。

Answer 2

一种干净的方法是派生第三方组件，并使其公开引用。

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

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裁判可以更改为旧式裁判。

如何在react <16中获取包装元素的“ ref”？

2 个答案: