React 组件的3大属性: refs

这篇具有很好参考价值的文章主要介绍了React 组件的3大属性: refs。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、理解

Refs(引用)是 React 中用于访问组件中的 DOM 元素或其他 React 组件实例的一种机制。它们提供了一种途径,使你可以在React中直接操作和访问DOM元素,或者在React组件之间进行通信。

用途:

  • 焦点的管理、文本的选择、媒体的播放;
  • 强制触发动画;
  • 继承三方 DOM 库;

二、创建refs的方式有哪些

2.1、字符串 Refs(不建议使用)

字符串 Refs 是 React 中的一种创建 Refs 的方式,但自 React 16.3 版本开始,官方不再推荐使用它,因为它存在一些潜在的问题,比如性能问题和可维护性问题。然而,为了完整性,我将展示如何使用字符串 Refs,但请谨慎使用它们。

在字符串 Refs 中,你可以将 Ref 分配为一个字符串,通常是在 componentDidMount 中进行分配,然后你可以通过访问 this.refs 来获取引用。

以下是一个示例:

import React, { Component } from 'react';

class MyComponent extends Component {
  componentDidMount() {
    // 分配Ref为字符串
    this.refs.myRefElement.focus();
  }

  render() {
    return (
      <div>
        <input ref="myRefElement" /> {/* 分配Ref为字符串 */}
      </div>
    );
  }
}

export default MyComponent;

在上面的示例中,我们使用字符串 "myRefElement" 分配 Ref 给 input 元素,然后在 componentDidMount 中通过 this.refs.myRefElement 访问该元素并将焦点聚焦到它。

尽管字符串 Refs 在过去是有效的,但它们已不再被官方推荐,因为它们在以下方面存在问题:

  1. 性能问题:字符串 Refs 在React内部需要维护一个额外的映射表,以便通过字符串名字查找Ref。这会导致性能问题,尤其在具有大量Refs的组件中。

  2. 可维护性:使用字符串 Refs 时,很难进行静态分析和检查,因此容易出现拼写错误或无法找到的Refs。

因此,建议在现代React应用程序中使用 React.createRef()useRef 钩子来创建Refs,以提高性能和可维护性。

2.2、回调 Refs

回调 Refs 是一种在 React 组件中创建 Refs 的方式,它可以用于访问 DOM 元素或其他组件实例。这种方式在 React 16.3 之前是主要的 Refs 创建方式,虽然在 React 16.3 之后,官方推荐使用 React.createRef()useRef 钩子来创建 Refs,但回调 Refs 仍然是一种有效的方法。

下面是如何使用回调 Refs 的详细描述:

  1. 创建 Refs:在组件中,首先定义一个变量来保存 Ref 对象,通常在构造函数中初始化为 null

    class MyComponent extends React.Component {
      constructor(props) {
        super(props);
        this.myRef = null;
      }
    }
    
  2. 分配 Refs 到元素或组件:在需要引用的 DOM 元素或组件上,使用 ref 属性,将 Ref 变量设置为回调函数。

    setMyRef = (element) => {
      this.myRef = element;
    }
    
    render() {
      return (
        <div>
          <input ref={this.setMyRef} />
        </div>
      );
    }
    

    通过这个回调函数,this.myRef 将会引用与之关联的 DOM 元素或组件实例。

  3. 访问 Refs:在需要访问 Refs 的地方,可以使用 this.myRef 来获取引用的元素或组件。

    componentDidMount() {
      if (this.myRef) {
        this.myRef.focus(); // 通过 Ref 聚焦到输入框
      }
    }
    

回调 Refs 的优点是它们在更早的 React 版本中是有效的,并且能够很好地用于访问 DOM 元素或子组件的实例。然而,随着 React 版本的更新,官方更推荐使用 React.createRef()useRef 钩子,因为它们在性能和可维护性方面更有优势。当需要在现代 React 项目中创建 Refs 时,通常更好的选择是使用 React.createRef()(类组件)或 useRef 钩子(函数式组件)。

2.3、React.createRef()(推荐使用)

在 React 16.3 以及之后的版本中,你可以使用内置的 React.createRef() 方法来创建 Refs。这是一种官方推荐的方式。

使用 React.createRef() 方式创建 Refs 很简单。以下是一个具体的示例:

import React from 'react';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef(); // 创建Ref对象
  }

  componentDidMount() {
    // 在组件渲染后,可以访问DOM元素
    this.myRef.current.focus(); // 聚焦到DOM元素
  }

  render() {
    return (
      <div>
        <input ref={this.myRef} /> {/* 将Ref分配给input元素 */}
        <button onClick={this.focusInput}>Focus Input</button>
      </div>
    );
  }

  focusInput = () => {
    // 在事件处理程序中访问Ref
    this.myRef.current.focus();
  };
}

export default MyComponent;

在上面的示例中,我们首先在构造函数中使用 React.createRef() 创建了一个Ref对象,然后在input元素上使用 ref 属性将这个Ref分配给DOM元素。在componentDidMount生命周期方法中,我们使用 this.myRef.current 来访问DOM元素并将焦点聚焦到input上。我们还在一个按钮的点击事件处理程序中使用Ref,再次将焦点聚焦到input上。

这就是使用 React.createRef() 创建和访问Refs的一般过程。这种方式通常用于访问和操作DOM元素,或者引用子组件的实例。

2.4、通过 React Hook(函数式组件)

使用 React Hook(useRef 钩子)在函数式组件中创建 Refs同样非常简单。以下是一个具体的示例:

import React, { useRef, useEffect } from 'react';

function MyComponent() {
  const myRef = useRef(null); // 创建Ref对象

  useEffect(() => {
    // 在组件渲染后,可以访问DOM元素
    myRef.current.focus(); // 聚焦到DOM元素
  }, []);

  const focusInput = () => {
    // 在事件处理程序中访问Ref
    myRef.current.focus();
  };

  return (
    <div>
      <input ref={myRef} /> {/* 将Ref分配给input元素 */}
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
}

export default MyComponent;

在上面的示例中,我们首先使用 useRef(null) 创建一个Ref对象。useRef() 的参数是初始值,通常设置为 null,因为它在初始渲染时并不关心实际的值。

然后,我们使用 useEffect 钩子来模拟 componentDidMount 生命周期方法,在其中使用 myRef.current 访问DOM元素并将焦点聚焦到input上。useEffect 接受第二个参数,一个依赖数组,这里为空数组,表示只在组件的初始渲染时执行这个效果。

最后,我们在一个按钮的点击事件处理程序中再次使用Ref,将焦点聚焦到input上。

使用 useRef 钩子可以在函数式组件中方便地创建和访问Refs,以及执行与Refs相关的操作,而无需使用类组件。这种方式在React 16.8及之后的版本中可用。

三、例

3.1、焦点管理

以下是一个简单的 React 示例,演示如何使用 Refs 来管理焦点,具体是将焦点从一个输入框移动到另一个输入框。这个示例包括一个按钮,当点击按钮时,将焦点从一个输入框转移到另一个输入框。

import React, { Component } from 'react';

class FocusManagementExample extends Component {
  constructor(props) {
    super(props);
    this.inputRef1 = React.createRef(); // 创建 Ref for Input 1
    this.inputRef2 = React.createRef(); // 创建 Ref for Input 2
  }

  moveFocus = () => {
    this.inputRef2.current.focus(); // 移动焦点到 Input 2
  };

  render() {
    return (
      <div>
        <input ref={this.inputRef1} placeholder="Input 1" />
        <input ref={this.inputRef2} placeholder="Input 2" />
        <button onClick={this.moveFocus}>Move Focus to Input 2</button>
      </div>
    );
  }
}

export default FocusManagementExample;

在这个示例中,我们首先创建两个 Refs,this.inputRef1this.inputRef2,分别引用两个输入框。然后,在 moveFocus 方法中,我们使用 this.inputRef2.current.focus() 来将焦点移动到第二个输入框。当点击按钮时,调用 moveFocus 方法,焦点将从输入框 1 移动到输入框 2。

3.2、文本的选择

下面是一个简单的 React 示例,演示如何使用 Refs 来实现文本选择的功能。在这个示例中,有一个文本输入框和一个按钮,点击按钮后会选择文本输入框中的文本。

import React, { Component } from 'react';

class TextSelectionExample extends Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef(); // 创建 Ref for the text input
  }

  selectText = () => {
    if (this.inputRef.current) {
      this.inputRef.current.select(); // 选择文本输入框中的文本
    }
  };

  render() {
    return (
      <div>
        <input ref={this.inputRef} placeholder="Type some text" />
        <button onClick={this.selectText}>Select Text</button>
      </div>
    );
  }
}

export default TextSelectionExample;

在这个示例中,我们首先创建一个 Ref this.inputRef 并将其分配给输入框。然后,我们定义了 selectText 方法,该方法使用 this.inputRef.current.select() 来选择文本输入框中的文本。当按钮被点击时,调用 selectText 方法,文本输入框的文本将被选中。

3.3、媒体的播放

以下是一个使用 React 来创建一个简单的媒体播放器的示例。这示例包括一个播放/暂停按钮、一个音频元素,以及一些状态管理来控制播放状态。

import React, { Component } from 'react';

class MediaPlayerExample extends Component {
  constructor(props) {
    super(props);
    this.audioRef = React.createRef(); // 创建 Ref for the audio element
    this.state = {
      isPlaying: false,
    };
  }

  togglePlay = () => {
    const audio = this.audioRef.current;

    if (this.state.isPlaying) {
      audio.pause();
    } else {
      audio.play();
    }

    this.setState({ isPlaying: !this.state.isPlaying });
  };

  render() {
    return (
      <div>
        <audio ref={this.audioRef} controls>
          <source src="your-audio-file.mp3" type="audio/mpeg" />
          Your browser does not support the audio element.
        </audio>
        <button onClick={this.togglePlay}>
          {this.state.isPlaying ? 'Pause' : 'Play'}
        </button>
      </div>
    );
  }
}

export default MediaPlayerExample;

在这个示例中,我们首先创建一个 Ref this.audioRef 并将其分配给audio元素。然后,我们定义了 togglePlay 方法,该方法会根据当前播放状态(isPlaying)来播放或暂停音频,然后更新状态以反映新的播放状态。

<audio> 元素用于播放音频文件,并带有控件来控制播放。你可以在 <source> 元素的 src 属性中指定音频文件的URL。

按钮元素允许用户点击来切换播放/暂停状态,并在按钮上显示当前状态。

这是一个简单的媒体播放器示例,你可以根据实际需求扩展它以添加更多功能,例如音量控制、跳过、循环等功能。

3.4、强制触发动画

在 React 中,你可以使用 ref 来访问组件或 DOM 元素,以便在需要时强制触发动画。以下是一个简单的示例,演示如何使用 React 和 ref 来强制触发 CSS 动画:

import React, { Component } from 'react';

class AnimationExample extends Component {
  constructor(props) {
    super(props);
    this.animationBoxRef = React.createRef(); // 创建 Ref for the animated box
  }

  startAnimation = () => {
    const box = this.animationBoxRef.current;

    // 添加 CSS 类以触发动画
    box.classList.add('animate');

    // 在动画完成后,移除 CSS 类以重置动画
    box.addEventListener('animationend', () => {
      box.classList.remove('animate');
    });
  };

  render() {
    return (
      <div>
        <div
          ref={this.animationBoxRef}
          className="box"
        ></div>
        <button onClick={this.startAnimation}>Start Animation</button>
      </div>
    );
  }
}

export default AnimationExample;

在这个示例中,我们首先创建了一个 Ref this.animationBoxRef 并将其分配给一个 div 元素,该 div 元素表示动画的目标。然后,我们定义了 startAnimation 方法,该方法使用 classList 添加一个 CSS 类 animatediv 元素上,以触发动画。

在动画结束后,我们使用 addEventListener 监听 animationend 事件,并在事件处理程序中移除 CSS 类 animate 以重置动画状态。

按钮元素允许用户点击来触发动画。你可以在 CSS 中定义相应的动画效果,例如通过 @keyframes 规则来定义动画的细节。

3.5、继承三方 DOM 库

继承第三方 DOM 库通常需要在 React 中使用 ref 来访问和操作第三方库中的 DOM 元素。以下是一个示例,演示如何在 React 中继承第三方 DOM 库(这里以使用D3.js库为例):

首先,确保你的项目中已经引入了 D3.js 库,你可以使用 npm 或通过 <script> 标签将其添加到你的项目中。

import React, { Component } from 'react';
import * as d3 from 'd3'; // 引入 D3.js

class D3IntegrationExample extends Component {
  constructor(props) {
    super(props);
    this.svgRef = React.createRef(); // 创建 Ref for the SVG element
  }

  componentDidMount() {
    // 在组件挂载后,初始化 D3.js 操作
    const svg = d3.select(this.svgRef.current);

    // 在 SVG 中添加一个矩形
    svg
      .append('rect')
      .attr('x', 10)
      .attr('y', 10)
      .attr('width', 100)
      .attr('height', 50)
      .style('fill', 'blue');
  }

  render() {
    return (
      <div>
        <svg ref={this.svgRef} width={200} height={100}></svg>
      </div>
    );
  }
}

export default D3IntegrationExample;

在这个示例中,我们首先引入了 D3.js 库。然后,我们创建一个 Ref this.svgRef 并将其分配给一个 <svg> 元素,这个元素将用来绘制 D3.js 图形。

componentDidMount 生命周期方法中,我们使用 D3.js 的 d3.select 方法选择了这个 <svg> 元素,并在其中添加一个蓝色矩形。你可以根据 D3.js 的文档和需要来进行更复杂的操作。

这个示例演示了如何在 React 中继承第三方 DOM 库,特别是 D3.js。你可以根据你的项目需求,继承其他的第三方库,然后使用 ref 来访问和操作其 DOM 元素。

参考地址

chatgpt

https://zhuanlan.zhihu.com/p/549934728文章来源地址https://www.toymoban.com/news/detail-735780.html

到了这里,关于React 组件的3大属性: refs的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【React】组件三大核心属性

    🚩🚩🚩 💎个人主页: 阿选不出来 💨💨💨 💎个人简介: 一名大二在校生,学习方向前端,不定时更新自己学习道路上的一些笔记. 💨💨💨 💎目前开发的专栏: JS 🍭Vue🍭React🍭 💨💨💨 state是组件对象最重要的属性,值是对象(可以包含多个key-value的组合)。 组件被成为

    2024年01月18日
    浏览(35)
  • React组件实例的三大属性

    React组件实例的三大属性分别是:state、props和refs。 State属性:用来存储组件内部的状态,只能在组件内部修改。当state被修改时,React会重新渲染组件。 Props属性:用来传递父组件的数据到子组件中,是组件的只读属性,无法在子组件中修改。当props被修改时,React会重新渲染

    2024年02月13日
    浏览(35)
  • React Native 桥接组件封装原生组件属性

    自定义属性可以让组件具备更多的灵活性,所以有必要在JS 层通过自定义属性动态传值。 因为 ViewManager 管理了整个组件的行为,所以要新增组件属性也需要在这里面(如 InfoViewManager)进行定义。 1、在InfoViewManager 中定义一个 setAvatar 方法。 @ReactProp 是 React Native 中的注解,用

    2024年01月21日
    浏览(41)
  • React Native Ref转发/Memo缓存/HOC高阶组件/Context上下文

    1、使用自定义组件时,实现外层组件对原始组件(TextInput)的操作 外层组件使用 ref 属性 子组件使用 forwardRef 包裹 2、函数式组件对外暴露实例方法(cusomFocus) 子组件 父组件如图一所示 1 、 避免多余渲染 问题:每次点击按钮都会导致 InfoView 组件发生重绘,即使每次 setI

    2024年01月21日
    浏览(51)
  • react 父组件调用子组件的属性或方法

    在vue3中, 子组件会使用 defineExpose 暴露出父组件需要访问的 变量 或 方法 父组件通过 ref 函数定义子组件的 refName ,并通过 refName.value.xxx 继续访问 可使用 useImperativeHandle 、 forwardRef 、 useRef 第一步,子组件 使用 useImperativeHandle 定义要暴露出去的内容,第一个参数是 ref forw

    2024年04月22日
    浏览(34)
  • React 组件的3大属性: state

    组件被称为\\\"状态机\\\", 页面的显示是根据组件的 state 属性的数据来显示。 state 是一个用于存储和管理组件内部数据的机制。 它是一种在组件中跟踪状态变化的方式,以便在数据发生变化时,React 可以更新用户界面以反映这些变化。 state 的使用在构建交互式和动态的用户界面

    2024年02月10日
    浏览(40)
  • React三种通过属性传递组件本身的方法

    直接传递 JSX 创建好的元素 把要传递的组件作为 JSX 元素写在属性值里,然后在接收的组件里用 {this.props.xxx} 来渲染。这种方法的优点是直观和灵活,缺点是可能造成不必要的重复渲染。 直接传递 JSX 创建好的元素的方法会造成不必要的渲染,是因为每次父组件重新渲染时,

    2024年02月12日
    浏览(40)
  • 在 React 中,props(属性)用于在组件之间传递数据

    在 React 中,props(属性)用于在组件之间传递数据。它是父组件向子组件传递信息的一种方式,通过 props,父组件可以向子组件传递数据、回调函数、配置项等。 注意: props 是只读的,它的值由父组件传递给子组件时确定,并且在子组件中不能直接修改。如果子组件需要改

    2024年02月15日
    浏览(52)
  • React从入门到实战 -组件的三大核心属性(1)state

    State state是组件对象最重要的属性, 值是对象 (可以包含多个Key-value的组合) 组件被称为状态机,通过更新组件的state来更新对应的页面显示(重新渲染组件) 有状态的组件 除了使用外部数据(通过this.props访问)以外,组件还可以维护其内部的状态数据(通过this.state访问

    2024年02月10日
    浏览(38)
  • React组件进阶之children属性,props校验与默认值以及静态属性static

    children 属性:表示该组件的子节点,只要组件有子节点,props就有该属性 children 属性与普通的 props 一样,值可以是任意值(文本、React元素、组件,甚至是函数) 核心代码 官网说明地址 对于组件来说,props 是外来的,无法保证组件使用者传入什么格式的数据 如果传入的数据

    2024年02月15日
    浏览(54)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包