使用refs获取节点_闲庭信步聊前端 - 原来你是这样的Refs

一、refs 的由来

什么是refs

refs是拿到真实的DOM节点和React元素实例的一种方法。在React官方文档中有提到Refs 提供了一种方式，允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。 React是单向的数据流，父子组件的交互是通过props。修改子组件需要使用新的props来重新渲染子组件。但是在某些情况下，你需要修改数据流以外的子组件，如DOM元素或者一个React元素实例，此时就需要Refs来改变。

refs的适用场景

根据官方文档，refs在以下几种场景中适用： 1. 操作DOM元素、控制文本内容或者媒体播放 2. 操作DOM元素，触发强制动画 3. 集成第三方DOM库

我们来看下，React中有以下四种使用方式

二、refs的四种方式

1. callback ref

React 支持一种通过回调的方式设置refs，这种方式可以控制refs何时被设置和解除。创建ref属性时，你会传递一个函数，这个函数会接受DOM元素或者组件实例作为参数，使他们能够在其他地方被访问。

class TestTemp extends React.Component {
    
  componentDidMount() {
    
    this.myRef.focus();
  }
  render() {
    
    return <input ref={(element) => {
    
      this.myRef = element;
    }} />;
  }
}

React在componetDidMount或者componetDidUpdate触发前调用ref回调，并且传入对应的DOM元素，保证refs是最新的。 在下面的例子中，父组件可以获取到子组件的DOM节点

function Child(props) {
    
  return (
    <div>
      <input ref={
    props.myRef} />
    </div>
  );
}
class Parent extends React.Component {
    
 componentDidMount() {
    
    this.myElement.focus();
  }
  render() {
    
    return (
      <Child
        myRef={
    element => this.myElement = element}
      />
    );
  }
}

父组件通过props传一个回调函数给子组件，子组件可以把这个函数作为ref属性的值绑定到DOM元素上。this.myElement就是对应子组件的DOM元素（input）

2. React.createRef()

createRef()是通过创建一个ref属性，传递给渲染的DOM元素或者是组件实例