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

Question

我的表单字段由一个反应组件单独包装。这个反应组件来自 3rd 方模块。我的挑战是设置“ref”并在该组件之外获取“ref”，以便我可以调用.focus它。

注意：我无权修改 3rd 方模块的代码。

我不能使用 .createRef 和 .forwardRef 因为没有访问代码的权限，重要的是没有使用 React 16+

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

结构如下：

    MyComponent: // Where I want to access the ref

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

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

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

标签： reactjsref

Answer 1

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

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