react ref 篇

[oliver1204]

1. 使用的方式

1.1 字符串定义（已废弃）

这个方案已经不被 react 官方推荐，而且会在未来的版本中移除。

// 在 render 函数里面
<input type="text" defaultValue="First" ref="first" />;

// 获取 ref
this.refs.first.value;

1.2 使用回调函数（不推荐）

ref 的值是一个函数的时候，那么函数会在虚拟dom转化为真实dom后执行，参数就是此真实dom

// 在 render 函数里面
<input
  type="text"
  defaultValue="Second"
  ref={input => (this.second = input)}
/>;

// 获取 ref
this.second.value;

1.3 使用 React.createRef()（推荐）

在 react 16.3 中，您将能够使用新的 React.createref() 函数使 ref 创建变得更容易。

// 在 class 中声明
third = React.createRef();
// 或者在 constructor 中声明
this.third = React.createRef();

// 在 render 函数中:
<input type="text" defaultValue="Third" ref={this.third} />;

// 获取 ref
this.third.current;

// 获取 input 的 value 
this.third.current.value;

注意：react@16.3.0-alpha.2 中使用 this.third.current 取到了值，但是这个 api 目前还不稳定，有的版本是通过 this.third.value 取到 dom 的引用。

2. 跨类组件传ref值

import React, { Component } from 'react';

class User extends Component {
  constructor(props) {
    super(props);
    this.userInput = React.createRef();
  }
  render() {
    return <input type="text" defaultValue="user" ref={this.userInput} />;
  }
}

class App extends Component {
  constructor(props) {
    super(props);
    this.user = React.createRef();
  }
  getFocus = (event) => {
    this.user.current.userInput.current.focus();
  };
  render() {
    return (
         <User ref={this.user} />
         <button onClick={this.getFocus}>让User组件获取焦点</button>
    )
  }
}

3. 跨函数组件传ref值

import React, { Component } from 'react';

function User(props, ref) {
  return <input type="text" ref={ref} />;
}

const ForwardedUser = React.forwardRef(User);

export default class Form extends Component {
  constructor(props) {
    super(props);
    this.user = React.createRef();
  }
  getFocus = (event) => {
    this.user.current.focus();
  };
  render() {
    return (
      <>
        <ForwardedUser ref={this.user} />
        <button onClick={this.getFocus}>让User组件获取焦点</button>
      </>
    );
  }
}

4. 如何在 Higher-Order Component 模式（HOC) 中传递 ref ？

1. 使用 React.createRef() 在 HOC 组件中绕开 ref 属性。

// 在 class 中声明
hocRef = React.createRef();
// 或者在 constructor 中声明
this.hocRef = React.createRef();

<HOCInstance myRef={el => this.hocRef = el} />

2.使用 forwardRef来解决HOC组件传递ref的问题的.

const TargetComponent = React.forwardRef((props, ref) => (
  <TargetComponent ref={ref} />
))