reactjs - 访问 React 组件中的 HTML 元素

Question

我有一个无法编辑的 React 组件InputComponent，我想获得对其内部 div 之一的引用。（例如为了专注于输入字段）。

const RefsExamplePage = () => {

    return (
        <div>

            <div>
                <InputComponent
                title="Test component"
                ></InputComponent>
            </div>

        </div>

    )
}

export default RefsExamplePage;

我如何实现这一目标？

Answer 1

我无法编辑

如果你不能编辑它，你唯一能做的就是传递ref给它并希望InputComponent实现 refs。

例如

const RefsExamplePage = () => {

    // use inputRef.current to access the input reference
    const inputRef = React.useRef()    

    return (
        <div>

            <div>
                <InputComponent
                    ref={inputRef}
                    title="Test component"
                />
            </div>

        </div>

    )
}

如果这不起作用或给您一些错误，您将需要修改InputComponent

Answer 2

如果InputComponent没有提供ref，您可以包装其父级（div容器），然后ref为其设置：

import React, { useRef } from "react";

const RefsExamplePage = () => {
    const container = useRef();
    return (
        <div>

            <div ref={container}>
                <InputComponent
                title="Test component"
                ></InputComponent>
            </div>

        </div>

    )
}

export default RefsExamplePage;

然后就可以通过 div 的ref.

Answer 3

用于useRef()创建对组件本身的引用。通过这种方式，您可以获得组件引用，并且可以使用.current它的属性来获取底层 DOM：

const RefsExamplePage = () => {

    const inputRef = useRef();

    const getInput = e => {
       // here get the any dom node available
       inputRef.current.querySelector('input').focus();
    };

    return (....
           <InputComponent 
             ref={inputRef} 
             onClick={getInput} 
             title="Test component"/> // <---if no child are passed change to self closing
        ....)
}