React中的refs作用

[guowei55555]

react中refs的作用:

获取dom元素。在React中Refs提供了一种方式，允许用户访问dom节点或者在render方法中创建的React元素。

refs转发

Ref 转发是一个可选特性，其允许某些组件接收 ref，并将其向下传递（换句话说，“转发”它）给子组件。

ref 的值根据节点的类型而有所不同：

1.当 ref 属性用于 HTML 元素时，构造函数中使用 React.createRef() 创建的 ref 接收底层 DOM 元素作为其 current 属性。

2.当 ref 属性用于自定义 class 组件时，ref 对象接收组件的挂载实例作为其 current 属性。

3.不能再函数组件上使用Ref属性，因为函数组件没有实例

示例代码

class CustomTextInput extends React.Component {
 constructor(props) {
   super(props); 
   this.textInput = React.createRef();  // 创建一个 ref 来存储 textInput 的 DOM 元素
   this.focusTextInput = this.focusTextInput.bind(this);
 }

 focusTextInput() {
   // 使用focus使 text 输入框获得焦点
   // 通过 "current" 来访问 DOM 节点
   this.textInput.current.focus();
 }

 render() {
   // 把 <input> ref 关联到 构造器里创建的 `textInput` 上
   return (
     <div>
       <input
         type="text"
         ref={this.textInput} />
       <input
         type="button"
         value="Focus the text input"
         onClick={this.focusTextInput}
       />
     </div>
   );
 }
}
//包装上面的 CustomTextInput，来模拟它挂载之后立即被点击的操作，我们可以使用 ref 来获取这个自定义的 input 组件并手动调用它的 focusTextInput 方法：
class AutoFocusTextInput extends React.Component {
  constructor(props) {
    super(props);
    this.textInput = React.createRef();
  }

  componentDidMount() {
    this.textInput.current.focusTextInput();
  }

  render() {
    return (
      <CustomTextInput ref={this.textInput} />
    );
  }
}