如何使用React中的Ref

这篇文章主要讲解了如何使用React中的Ref,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。

目前创新互联已为1000多家的企业提供了网站建设、域名、虚拟空间、绵阳服务器托管、企业网站设计、石首网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。

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 (
  
); } }

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

class Example extends React.Component {
 handleClick() {
 // 使用原生的 DOM API 获取焦点
 this.refs.myInput.focus
 ();
 }
 render() {
 // 当组件插入到 DOM 后,ref 属性添加一个组件的引用于到 this.refs
 return (
  
); } }

使用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 
; } }

访问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  ref
 // with the `textInput` that we created in the constructor
 return (
  
); } }

current当组件安装时,React将为该属性分配DOM元素,并null在卸载时将其分配回。ref更新发生之前componentDidMount或componentDidUpdate生命周期方法。

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

function MyFunctionComponent() {
 return ;
}

class Parent extends React.Component {
 constructor(props) {
 super(props);
 this.textInput = React.createRef();
 }
 render() {
 // This will *not* work!
 return (
  
 );
 }
}

**如果需要引用它,则应该将组件转换为类,就像您需要生命周期方法或状态时一样。
但是,只要引用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 (
 
); }

将DOM引用公开给父组件

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

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

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

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

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

看完上述内容,是不是对如何使用React中的Ref有进一步的了解,如果还想学习更多内容,欢迎关注创新互联行业资讯频道。


网站栏目:如何使用React中的Ref
转载源于:http://scyanting.com/article/posjhs.html