React之 ref 和 DOM

在常规的 React 数据流中，props 是父组件与子组件交互的唯一方式。要修改子元素，你需要用新的 props 去重新渲染子元素。然而，在少数情况下，你需要在常规数据流外强制修改子元素。被修改的子元素可以是 React 组件实例，或者是一个 DOM 元素。在这种情况下，React 提供了解决办法。

何时使用Ref

• 处理focus、文本选择器或者媒体播放
• 触发强制动画
• 集成第三方DOM库

尽量避免使用ref

在DOM元素上添加Ref

class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);
    this.focus = this.focus.bind(this);
  }

  focus() {
    // 通过使用原生API，显式地聚焦text输入框
    this.textInput.focus();
  }

  render() {
    // 在实例中通过使用`ref`回调函数来存储text输入框的DOM元素引用(例如:this.textInput)
    return (
      <div>
        <input
          type="text"
          ref={(input) => { this.textInput = input; }} />
        <input
          type="button"
          value="Focus the text input"
          onClick={this.focus}
        />

      </div>
    );
  }
}

React 组件在加载时将 DOM 元素传入 ref 的回调函数，在卸载时则会传入 null。在componentDidMount 或 componentDidUpdate 这些生命周期回调之前执行 ref 回调。

首选的方法是在 ref 回调中设置属性 就像上面的例子一样。 甚至有一个较短的写法： ref={input => this.textInput = input}。

注：这种方法仅对类组件有效

函数式组件使用ref

function CustomTextInput(props) {
  // textInput必须在这里声明，所以 ref 回调可以引用它
  let textInput = null;

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

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

---

对父组件暴露 DOM 节点

在极少数情况下，你可能希望从父组件访问子节点的 DOM 节点。通常不建议这样做，因为它会破坏组件的封装，但偶尔也可用于触发焦点或测量子 DOM 节点的大小或位置。

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

class Parent extends React.Component {
  render() {
    return (
      <CustomTextInput
        inputRef={el => this.inputElement = el}
      />
    );
  }
}

在上面的例子中，Parent 将它的 ref 回调作为一个特殊的 inputRef 传递给 CustomTextInput，然后 CustomTextInput 通过 ref 属性将其传递给 。最终，Parent 中的 this.inputElement 将被设置为与 CustomTextInput 中的 元素相对应的 DOM 节点。

注：上述示例中的 inputRef 属性没有特殊的含义，它只是一般的组件属性。

注意：

旧版本api：refs

类似于 “textInput” ，可以通过 this.refs.textInput 访问DOM节点。我们不建议使用，因为string类型的 refs 存在问题。已经过时了，可能会在未来的版本移除。建议用回调函数的方式代替。