反应引用 - 芒果文档

📌 相关文章

📜 反应引用

📅 最后修改于: 2020-12-19 08:37:24 🧑 作者: Mango

反应参考

Refs是React中用于引用的简写。它类似于React中的键。它是一个属性，可以存储对特定DOM节点或React元素的引用。它提供了一种访问React DOM节点或React元素以及如何与之交互的方法。当我们要更改子组件的值而无需使用道具时，可以使用它。

何时使用参考

在以下情况下可以使用引用：

当我们需要DOM测量时，例如管理焦点，文本选择或媒体播放。
它用于触发命令式动画。
与第三方DOM库集成时。
它也可以在回调中使用as。

何时不使用参考

对于可以声明式完成的任何操作，都应避免使用它。例如，您无需在Dialog组件上使用open()和close()方法，而需要向其传递isOpen属性。
您应该避免过度使用引用。

如何创建参考

在React中，可以使用React.createRef()创建引用。可以通过ref属性将其分配给React元素。通常在创建组件时将其分配给实例属性，然后可以在整个组件中对其进行引用。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.callRef = React.createRef();
  }
  render() {
    return ;
  }
}

如何访问裁判

在React中，当将ref传递到render方法中的元素时，可以通过ref的当前属性访问对节点的引用。

const node = this.callRef.current;

引用当前属性

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

在HTML元素中使用ref属性时，使用React.createRef()创建的ref会接收底层的DOM元素作为其当前属性。
如果ref属性用于自定义类组件，则ref对象将接收该组件的已安装实例作为其当前属性。
ref属性不能在函数组件上使用，因为它们没有实例。

添加对DOM元素的引用

在下面的示例中，我们添加了一个ref来存储对DOM节点或元素的引用。

import React, { Component } from 'react';
import { render } from 'react-dom';
 
class App extends React.Component {
  constructor(props) {
    super(props);
    this.callRef = React.createRef();
    this.addingRefInput = this.addingRefInput.bind(this);
  }
 
  addingRefInput() {
    this.callRef.current.focus();
  }
 
  render() {
    return (
      
        Adding Ref to DOM element
        
        
      
    );
  }
}
export default App;

输出量

将引用添加到类组件

在下面的示例中，我们添加了一个ref来存储对类组件的引用。

例

import React, { Component } from 'react';
import { render } from 'react-dom';
 
function CustomInput(props) {
  let callRefInput = React.createRef();
 
  function handleClick() {
    callRefInput.current.focus();
  }
 
  return (
    
      Adding Ref to Class Component
      
      
    
  );
}
class App extends React.Component {
  constructor(props) {
    super(props);
    this.callRefInput = React.createRef();
  }
 
  focusRefInput() {
    this.callRefInput.current.focus();
  }
 
  render() {
    return (
      
    );
  }
}
export default App;

输出量

回调参考

在react中，还有另一种使用ref的方法，称为“回调refs ”，它在设置和取消设置ref时提供了更多控制。代替通过createRef()方法创建引用，React允许通过将回调函数传递给组件的ref属性来创建引用的方法。看起来像下面的代码。

 this.callRefInput = element} />

回调函数用于在实例属性中存储对DOM节点的引用，并且可以在其他位置访问。可以通过以下方式访问：

this.callRefInput.value

下面的示例有助于了解回调引用的工作。

import React, { Component } from 'react';
import { render } from 'react-dom';
 
class App extends React.Component {
    constructor(props) {
    super(props);

    this.callRefInput = null;

    this.setInputRef = element => {
      this.callRefInput = element;
    };

    this.focusRefInput = () => {
      //Focus the input using the raw DOM API
      if (this.callRefInput) this.callRefInput.focus();
    };
  }

  componentDidMount() {
    //autofocus of the input on mount
    this.focusRefInput();
  }

  render() {
    return (
      
    Callback Refs Example
        
        
      
    );
  }
}
export default App;

在上面的示例中，当组件安装时，React将调用“ ref”回调以存储对输入DOM元素的引用，而当组件卸载时，以null调用它。在componentDidMount或componentDidUpdate触发之前，引用始终是最新的。组件之间传递的回调ref与使用React.createRef()创建的对象ref相同。

输出量

将Ref从一个组件转发到另一组件

引用转发是一种用于将ref通过组件传递到其子组件之一的技术。可以通过使用React.forwardRef()方法来执行。此技术对于高阶组件特别有用，并且特别用于可重用组件库中。最常见的示例如下。

例

import React, { Component } from 'react';
import { render } from 'react-dom';

const TextInput = React.forwardRef((props, ref) => (
  
));

const inputRef = React.createRef();

class CustomTextInput extends React.Component {
  handleSubmit = e => {
    e.preventDefault();
    console.log(inputRef.current.value);
  };
  render() {
    return (
      
         this.handleSubmit(e)}>
          
          
        
      
    );
  }
}
export default App;

在上面的示例中，有一个TextInput组件，其中有一个子级作为输入字段。现在，要将ref向下传递或转发到输入，首先，创建一个ref，然后将您的ref向下传递给。之后，React将ref作为第二个参数转发给forwardRef函数。接下来，我们将此ref参数向下转发到。现在，可以在inputRef.current处访问DOM节点的值。

与useRef()反应

它在React 16.7及更高版本中引入。它有助于访问DOM节点或元素，然后我们可以与该DOM节点或元素进行交互，例如聚焦输入元素或访问输入元素值。它返回其.current属性初始化为传递的参数的ref对象。返回的对象在组件的生存期内一直存在。

句法

const refContainer = useRef(initialValue);

例

在下面的代码中， useRef是一个函数，该函数分配给变量inputRef ，然后附加到要引用的HTML元素内称为ref的属性。

function useRefExample() {
  const inputRef= useRef(null);
  const onButtonClick = () => {
    inputRef.current.focus();
  };
  return (
    <>
      
      
    
  );
}