React forwardRef：跳转引用

最新推荐文章于 2025-07-21 09:38:50 发布

weixin_34124651

最新推荐文章于 2025-07-21 09:38:50 发布

阅读量581

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/sea-breeze/p/10461271.html

本文详细介绍了React中Ref的三种使用场景：在DOM组件、高阶组件中使用及其实现原理。通过实例展示了如何在自定义组件中传递Ref，实现对组件内部元素的直接操作。

一在DOM组件中使用

import React, { Component } from 'react';

// 跳转引用对象本身并不关心ref，而是由渲染函数转发ref
const FancyButton = React.forwardRef((props, ref) => (
    <button ref={ref} className="FancyButton">
        {props.children}
    </button>
));

class App extends Component {
    constructor(props) {
        super(props);
        this.myRef = React.createRef();
    }
    click() {
        this.myRef.current.focus();
        console.log(this.myRef.current.innerHTML)
    }
    render() {
        return (
            <div>
                <FancyButton ref={this.myRef}>光彩夺目的按钮</FancyButton>
                <div onClick={this.click.bind(this)}>点击我</div>
            </div>
        );
    }
}

export default App;

二在高阶组件中使用

1 app.js

import React, { Component } from 'react';
import FancyButton from './fancyButton.jsx';

class App extends Component {
  constructor(props) {
    super(props);
    this.btnRef = React.createRef(); // 创建引用对象
  }
  click(){
    this.btnRef.current.print();
  }
  render() {
    return (
      <div>
        <FancyButton ref={this.btnRef} />
        <div onClick={this.click.bind(this)}>点击</div>
      </div>

    );
  }
}

export default App;

2 logProps.js

import React from 'react';

export default function logProps(Component) {
    // 高阶组件
    class LogProps extends React.Component {
        componentDidUpdate(prevProps) {
            console.log('old props:', prevProps);
            console.log('new props:', this.props);
        }

        render() {
            const { myForwardRef, ...rest } = this.props;
            // 引用对象的current属性指向被包裹组件
            return <Component ref={myForwardRef} {...rest} />;
        }
    }

    // 将高阶组件包裹在跳转引用对象中。
    return React.forwardRef((props, ref) => {
        // 将ref属性转换成高阶组件的自定义属性，将引用对象转移到了高阶组件的props属性中。
        // 防止React自动处理组件的ref属性。
        return <LogProps {...props} myForwardRef={ref} />;
    });
}

3 fancyButton.js

import React, { Component } from 'react';
import logProps from './logProps.jsx';

class FancyButton extends Component {
    print(){
        console.log('色彩夺目的按钮');
    }
    render() {
        return <button>色彩夺目的按钮</button>
    }
}

export default logProps(FancyButton);