React中的Refs & DOM

在React数据流中，父子组件唯一的交流方式是通过props属性；如果要修改子组件，通过修改父组件的属性，更新达到子组件props属性的值，重新渲染组件以达到视图的更新。但是，有些场景需要获取某一个真实的DOM元素来交互，比如文本框的聚焦、触发强制动画等。

1、给DOM元素添加ref属性

首先在React中可以给任意组件添加特殊属性。如：ref；

给html元素添加ref属性，该属性接收一个回调函数，而该回调接收底层当前的DOM元素作为回调参数。所以我们就可以将参数（DOM元素）添加到组件实例的自定义属性中。


class Foo extends React.Component {
  constructor(props) {
    super(props);
    this.handle = this.handle.bind(this);
  }
  
  render() {
    return <div>
            <input ref={el => {this.eleInput = el}}/> // el 指向当前DOM元素（input）
            <button onClick = {this.handle}>聚焦</button>
           </div>
  }
  
  handle() {
    this.eleInput.focus();
  }
}

ReactDOM.render(
  <Foo/>,
  document.getElementById('root')
);

Foo组件在加载时，将DOM元素传入ref的回调参数中，然后将其赋值给组件实例的自定义属性eleInput。

在组件卸载时，会传入null。ref回调会在componentDidMount和 componentWillUpdate 生命周期之前执行。

2、给类组件添加ref属性

如果给 class 声明的自定义组件添加ref属性，则ref回调的参数将是已经加载的该组件实例。

class Foo extends React.Component {
  render() {
    return <div>
            <input type="text"/>
          </div>
  }
}

class Fn extends React.Component {
  render() {
    return <Foo ref = {el => {this.componEle = el; console.log(el)}}/> // el指向当前组件实例
  }
}

ReactDOM.render(
  <Fn/>,
  document.getElementById('root')
);

给组件添加ref属性，则其回调参数指向当前组件实例。

Foo组件实例

注意：这种方式只对class声明的组件有效。

3、refs与函数式组件

ref属性不能用在函数式声明的组件上，因为函数声明的组件没有实例。

以下这种方式ref是无效的。

function Foo() {
  return <div>
            <input type="text"/>
          </div>
}

class Fn extends React.Component {
  render() {
    // ref 是无效的，并且会报错
    return <Foo ref = {el => {this.componEle = el}}/>
  }
}

函数式组件中 ref无效

如果要使用ref获取组件实例，需要转换成class声明的组件。

但是可以在函数式声明的组件内部使用ref属性。如下：

function Foo() {
  
  let eleInput = null;
  function handle() {
    eleleInpute.focus();
  }
  return <div>
            <input type="text" ref={el => eleInput = el}/>
            <button onClick = {handle}>聚焦</button>
          </div>
}
class Fn extends React.Component {
  render() {
    return <Foo/>
  }
}
ReactDOM.render(
  <Fn/>,
  document.getElementById('root')
);

4、对父组件暴露DOM子节点

有些情况下，我们需要从父组件中访问子组件中的某一个DOM节点。可以通过在组件上添加自定义属性，传递一个回调给子组件。而且这种方式适用于函数式组件和class组件。如下：

function Foo(props) {
  return <div>
            <input type="text" ref = {props.inputEle}/>
          </div>
}

class Fn extends React.Component {
  constructor(props) {
    super(props);
    this.handle = this.handle.bind(this);
  }
  render() {
    return <div>
    <Foo inputEle = {el => {this.eleInput = el; console.log(el)}}/> // el为子组件上对应的DOM节点
      <button onClick = {this.handle}>聚焦</button>
      </div>
  }
  
  handle() {
    this.eleInput.focus();
  }
}

注意点：

inputEle属性没有特殊含义，就是一般属性名。
回调使用箭头函数。因为此时的this的指向的是Foo组件实例。如果使用普通函数，在需要将this保存在一个变量中。

还可以像Vue中一样，给ref设置字符串类型的值，通过this.refs.xxx获取DOM节点，但是不建议使用它，因为 String 类型的 refs 存在问题。它已过时并可能会在未来的版本是移除（官网这么说滴）。而且，如果在父组件中获取子组件的DOM节点，在函数式组件中是无效获取不到的。

最后编辑于：2019.04.09 14:42:37