React的ref是怎样调用其他元素？_react中class组件使用ref-优快云博客

本文链接：https://blog.youkuaiyun.com/fanlehai/article/details/121349792

本文介绍了React中ref的概念，详细讲解了在class组件和函数组件中如何使用ref，包括createRef、useRef和forwardRef的用法，还提到了通过回调和props属性访问元素的其他方式，并给出了查看示例效果的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、什么是 `ref`

ref 可以理解为指向React 元素的变量，方便其他组件访问这个React元素。

二、class组件使用ref

1、createRef : class组件

通过ref ，访问class组件。

class CustomTextInput extends React.Component {
    constructor(props) {
        super(props);
        this.state = { text: "" };
    }

    setTextInput(text) {
        this.setState({ text: text });
    }

    render() {
        return (<input type="text" value={this.state.text} onChange={() => { }} />);
    }
}

class SetTextInput extends React.Component {
    constructor(props) {
        super(props);
        this.textInput = React.createRef();
    }

    componentDidMount() {
        this.textInput.current.setTextInput("测试");
    }

    render() {
        return (<CustomTextInput ref={this.textInput} />);
    }
}

2、createRef : dom元素

通过ref，访问React元素。

// 使用 ref 调用 input 元素的 focus 方法
class CustomTextInput extends React.Component {
    constructor(props) {
        super(props);
      	// 1、创建 ref
        this.textInput = React.createRef();
    }
		// 3、使用 ref 访问元素
    componentDidMount() {
        this.textInput.current.focus();
    }
		// 2、将元素的 ref属性 与 创建的ref 进行关联
    render() {
        return (
            <input type="text" ref={this.textInput} />
        );
    }
}

三、函数组件中使用ref

1、无法使用 ref 属性

// 错误案例：
function MyFunctionComponent() {
    return <input />;
}

class Parent extends React.Component {
    constructor(props) {
        super(props);
        this.textInput = React.createRef();
    }
    render() {
        // This will *not* work!
        return (
            <MyFunctionComponent ref={this.textInput} />
        );
    }
}

2、useRef

函数组件使用 useRef 来访问React元素。

function CustomTextInput(props) {
    const textInput = React.useRef(null);

    function handleClick() {
        textInput.current.focus();
    }

    return (
        <div>
            <input
                type="text"
                ref={textInput} />
            <input
                type="button"
                value="Focus the text input"
                onClick={handleClick}
            />
        </div>
    );
}

3、forwardRef

通过 forwardRef 可以转发ref，访问组件的子元素。

const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));

// 可以直接获取 DOM button 的 ref：
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;

四、其他方式访问元素

1、通过回调

class CustomTextInput extends React.Component {
    constructor(props) {
        super(props);
        this.textInput = null;
        this.focusTextInput = () => {
            if (this.textInput) this.textInput.focus();
        };
    }

    componentDidMount() {
        this.focusTextInput();
    }

    render() {
        return (
            <input type="text" ref={element => this.textInput = element} />
        );
    }
}

2、通过 props 属性

function CustomTextInput(props) {
    return (<input ref={props.inputRef} />);
}

class Parent extends React.Component {
    constructor(props) {
        super(props);
        this.inputElement = null;
        this.focusTextInput = () => {
            if (this.inputElement) this.inputElement.focus();
        };
    }

    componentDidMount() {
        this.focusTextInput();
    }
    render() {
        return (<CustomTextInput inputRef={el => this.inputElement = el} />);
    }
}

五、通过HTML直接查看上面示例效果的方式

增加上面代码到脚本标签下，然后复制到 index.html ，用浏览器打开即可看到效果。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>DOM元素使用ref</title>
    <!-- 第一步：加载开发版本的React -->
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

    <!-- 部署时，请用下面链接替代上面 -->
    <!-- <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script> -->

    <!-- 第二步：加载开发版本的babel -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
       // 这里增加代码
       ReactDOM.render(<MyCompent />, document.getElementById('root'));
    </script>
</body>
</html>