React中Ref 的使用方法详解

本文实例讲述了react中ref 的使用方法。分享给大家供大家参考，具体如下：

react中ref 的使用 react v16.6.3

在典型的react数据流中，props是父组件与其子组件交互的唯一方式。要修改子项，请使用new props 重新呈现它。但是，在某些情况下，需要在典型数据流之外强制修改子项。要修改的子项可以是react组件的实例，也可以是dom元素。对于这两种情况，react都提供了api。

何时使用refs

refs有一些很好的用例：

• 1.文本选择或媒体播放。
• 2.触发势在必行的动画。
• 3.与第三方dom库集成。

避免将refs用于可以声明性地完成的任何操作。

*不要过度使用refs

旧版api：字符串引用

如果您之前使用过react，那么您可能熟悉一个旧的api，其中ref属性是一个字符串"textinput"，并且dom节点被访问为this.refs.textinput。建议不要使用它，因为字符串引用有一些问题，被认为是遗留问题，很可能会在未来的某个版本中删除。

回调引用

当组件安装时，react将使用dom元素调用ref回调，并在卸载时调用null。

在componentdidmount或componentdidupdate触发之前，refs保证是最新的.

class customtextinput extends react.component {
 constructor(props) {
 super(props);

 this.textinput = null;

 this.settextinputref = element => {
  this.textinput = element;
 };

 this.focustextinput = () => {
  // focus the text input using the raw dom api
  if (this.textinput) this.textinput.focus();
 };
 }

 componentdidmount() {
 // autofocus the input on mount
 this.focustextinput();
 }

 render() {
 // use the `ref` callback to store a reference to the text input dom
 // element in an instance field (for example, this.textinput).
 return (
  <div>
  <input
   type="text"
   ref={this.settextinputref}
  />
  <input
   type="button"
   value="focus the text input"
   onclick={this.focustextinput}
  />
  </div>
 );
 }
}

refs例子--点击获取input焦点

class example extends react.component {
 handleclick() {
 // 使用原生的 dom api 获取焦点
 this.refs.myinput.focus
 ();
 }
 render() {
 // 当组件插入到 dom 后，ref 属性添加一个组件的引用于到 this.refs
 return (
  <div>
  <input type="text" ref="myinput" />
  <input
   type="button"
   value="点我输入框获取焦点"
   onclick={this.handleclick.bind(this)}
  />
  </div>
 );
 }
}

使用react.createref()

react.createref()react 16.3中引入的api。如果您使用的是早期版本的react，我们建议您使用回调引用。

创建react.createref()

refs是使用属性创建的，react.createref()并通过ref属性附加到react元素。在构造组件时，通常将refs分配给实例属性，以便可以在整个组件中引用它们。

class mycomponent extends react.component {
 constructor(props) {
 super(props);
 this.myref = react.createref();
 }
 render() {
 return <div ref={this.myref} />;
 }
}

访问ref

当ref被传递给元素时render，对该节点的引用变得可以在currentref 的属性处访问

const node = this.myref.current;

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

• 当在refhtml元素上使用该属性时，ref在构造函数中创建的属性将react.createref()接收底层dom元素作为其current属性。
• 在ref自定义类组件上使用该属性时，该ref对象将接收组件的已安装实例作为其current。

您可能无法ref在函数组件上使用该属性，因为它们没有实例。

class customtextinput extends react.component {
 constructor(props) {
 super(props);
 // create a ref to store the textinput dom element
 this.textinput = react.createref();
 this.focustextinput = this.focustextinput.bind(this);
 }

 focustextinput() {
 // explicitly focus the text input using the raw dom api
 // note: we're accessing "current" to get the dom node
 this.textinput.current.focus();
 }

 render() {
 // tell react that we want to associate the <input> ref
 // with the `textinput` that we created in the constructor
 return (
  <div>
  <input
   type="text"
   ref={this.textinput} />

  <input
   type="button"
   value="focus the text input"
   onclick={this.focustextinput}
  />
  </div>
 );
 }
}

current当组件安装时，react将为该属性分配dom元素，并null在卸载时将其分配回。ref更新发生之前componentdidmount或componentdidupdate生命周期方法。

无法在函数组件上使用ref属性

function myfunctioncomponent() {
 return <input />;
}

class parent extends react.component {
 constructor(props) {
 super(props);
 this.textinput = react.createref();
 }
 render() {
 // this will *not* work!
 return (
  <myfunctioncomponent ref={this.textinput} />
 );
 }
}

**如果需要引用它，则应该将组件转换为类，就像您需要生命周期方法或状态时一样。
但是，只要引用dom元素或类组件，就可以在函数组件中使用该ref属性：**

function customtextinput(props) {
 // textinput must be declared here so the ref can refer to it
 let textinput = react.createref();

 function handleclick() {
 textinput.current.focus();
 }

 return (
 <div>
  <input
  type="text"
  ref={textinput} />

  <input
  type="button"
  value="focus the text input"
  onclick={handleclick}
  />
 </div>
 );
}

将dom引用公开给父组件

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

虽然可以向子组件添加引用，但这不是一个理想的解决方案，因为只能获得组件实例而不是dom节点。此外，这不适用于功能组件。

如果使用react 16.3或更高版本，我们建议在这些情况下使用ref forwarding。引用转发允许组件选择将任何子组件的引用公开为自己的组件。可以在ref转发文档中找到有关如何将子dom节点公开给父组件的详细示例。

如果您使用react 16.2或更低版本，或者您需要比ref转发提供的更多灵活性，您可以使用此替代方法并明确地将ref作为不同名称的prop传递。

如果可能，建议不要暴露dom节点，但它可以是一个有用的逃生舱。请注意，此方法要求向子组件添加一些代码。如果您完全无法控制子组件实现，则最后一个选项是使用finddomnode()，但不鼓励使用它strictmode。

希望本文所述对大家react程序设计有所帮助。