React Refs

作者likuolei

以下是关于 React 中 Refs 的中文讲解，结合 Visual Studio Code（VSCode）环境，基于 npm 创建的 React 项目，内容简洁清晰，适合初学者。讲解包括 Refs 的基本概念、使用方法（函数组件和类组件）、中文支持、在 VSCode 中的实践以及调试方法。

1. 什么是 React Refs？

Refs（References 的缩写）是 React 提供的一种机制，用于直接访问 DOM 元素或组件实例。它允许开发者绕过 React 的常规数据流（如 State 和 Props），直接操作 DOM 或调用组件方法。

  • 特点：
  • 直接访问：Refs 提供对 DOM 节点或组件实例的引用。
  • 非受控场景：常用于非受控组件（如直接获取输入框值）或管理 DOM 操作（如聚焦、滚动）。
  • 中文支持：Refs 可处理中文输入或显示，适合多语言场景。
  • 谨慎使用：Refs 应尽量避免过度使用，优先考虑 State 和 Props。
  • 使用场景：
  • 聚焦输入框。
  • 获取表单值（非受控组件）。
  • 触发 DOM 操作（如播放视频、滚动到指定位置）。
  • 调用子组件的自定义方法。

2. 准备工作

确保 React 项目已创建

  • 使用 create-react-app 创建项目：
  npx create-react-app my-refs-app
  cd my-refs-app
  npm start
  • 项目在 http://localhost:3000 运行。

VSCode 配置

  • 安装扩展：
  • ESLint：检查代码规范。
  • Prettier：格式化代码。
  • Reactjs code snippets：快速插入 JSX 和组件代码。
  • Auto Rename Tag：同步编辑 HTML 标签。
  • 配置 ESLint 和 Prettier：
  • 安装依赖：
    bash npm install --save-dev eslint prettier eslint-plugin-react eslint-plugin-react-hooks
  • 创建 .eslintrc.json：
    json { "env": { "browser": true, "es2021": true }, "extends": ["eslint:recommended", "plugin:react/recommended", "plugin:react-hooks/recommended"], "parserOptions": { "ecmaVersion": 12, "sourceType": "module" }, "plugins": ["react", "react-hooks"], "rules": {} }
  • 创建 .prettierrc：
    json { "semi": true, "trailingComma": "es5", "singleQuote": true, "printWidth": 80 }
  • 中文支持：
  • 确保 public/index.html 包含：
    html <meta charset="UTF-8">
  • 配置 VSCode 终端支持中文：
    json { "terminal.integrated.env.osx": { "LANG": "zh_CN.UTF-8" } }
  • 保存源文件为 UTF-8（右下角点击编码，选择“通过 UTF-8 保存”）。

3. 函数组件中的 Refs

函数组件使用 useRef Hook 创建和管理 Refs，是现代 React 的推荐方式。

示例代码：聚焦输入框

修改 src/App.js，实现点击按钮聚焦输入框：

import React, { useRef } from ‘react’;
import ‘./App.css’;

function App() {
const inputRef = useRef(null);

const handleFocus = () => {
inputRef.current.focus();
};

return (

Refs 示例：聚焦输入框

点击聚焦
);
}

export default App;

代码说明

  • useRef：创建 inputRef，初始值为 null。
  • ref 属性：将 inputRef 绑定到 <input>，inputRef.current 指向 DOM 元素。
  • handleFocus：调用 inputRef.current.focus() 使输入框获得焦点。
  • 中文支持：输入框支持中文，显示中文标题和占位符。

运行代码

  1. 保存 App.js，确保终端运行：
   npm start
  1. 浏览器在 http://localhost:3000 显示输入框和按钮，点击按钮后输入框获得焦点。

示例代码：非受控表单

使用 Refs 获取输入值：

import React, { useRef, useState } from ‘react’;
import ‘./App.css’;

function App() {
const nameRef = useRef(null);
const [message, setMessage] = useState(”);

const handleSubmit = (event) => {
event.preventDefault();
setMessage(提交成功！姓名：${nameRef.current.value});
nameRef.current.value = ”;
};

return (

非受控表单

姓名： 提交

{message &&

{message}}
);
}

export default App;

  • 说明：
  • nameRef.current.value：直接获取输入框的值。
  • 提交后显示中文提示，清空输入框。
  • 非受控组件：输入框值不由 State 控制。

4. 类组件中的 Refs

类组件使用 React.createRef() 或回调函数创建 Refs。

示例代码：聚焦输入框

修改 src/App.js：

import React, { Component } from ‘react’;
import ‘./App.css’;

class App extends Component {
constructor(props) {
super(props);
this.inputRef = React.createRef();
this.handleFocus = this.handleFocus.bind(this);
}

handleFocus() {
this.inputRef.current.focus();
}

render() {
return (

Refs 示例：聚焦输入框

点击聚焦
);
}
}

export default App;

  • 说明：
  • React.createRef()：在构造函数中创建 Ref。
  • this.inputRef.current：访问 DOM 元素，调用 focus()。
  • 中文支持：显示中文标题和占位符。

示例代码：回调 Refs

使用回调函数创建 Refs：

import React, { Component } from ‘react’;
import ‘./App.css’;

class App extends Component {
constructor(props) {
super(props);
this.inputRef = null;
this.setInputRef = (element) => {
this.inputRef = element;
};
this.handleFocus = this.handleFocus.bind(this);
}

handleFocus() {
if (this.inputRef) {
this.inputRef.focus();
}
}

render() {
return (

回调 Refs 示例

点击聚焦
);
}
}

export default App;

  • 说明：
  • 回调 Refs：通过 ref={this.setInputRef} 将 DOM 元素赋值给 this.inputRef。
  • 更灵活，但 React.createRef 更简洁。

5. Refs 与组件

Refs 也可以引用组件实例，用于调用子组件的自定义方法。

示例代码：调用子组件方法


import React, { useRef } from ‘react’;
import ‘./App.css’;

function ChildComponent(props, ref) {
React.useImperativeHandle(ref, () => ({
sayHello: () => alert(‘你好！’),
}));

return

子组件;
}

const ForwardedChild = React.forwardRef(ChildComponent);

function App() {
const childRef = useRef();

const handleClick = () => {
childRef.current.sayHello();
};

return (

Refs 调用子组件方法

调用子组件方法
);
}

export default App;

  • 说明：
  • React.forwardRef：将 Ref 转发到函数组件。
  • useImperativeHandle：自定义 Ref 暴露的方法（如 sayHello）。
  • 中文支持：显示中文标题和弹窗消息。

6. Refs 注意事项

  • 谨慎使用：
  • 优先使用 State 和 Props 管理数据。
  • Refs 适合 DOM 操作或非受控场景。
  • 避免过度操作 DOM：直接修改 DOM 可能破坏 React 的虚拟 DOM 机制。
  • 组件 Refs：
  • 函数组件需使用 forwardRef 和 useImperativeHandle。
  • 类组件直接通过 React.createRef 访问实例。
  • 中文输入：确保 Refs 处理的输入支持 UTF-8 编码。

7. 调试 Refs

  1. Chrome 开发者工具：
  • 按 F12，使用 React Developer Tools 检查 Refs 和组件状态。
  • 查看控制台，排查 Ref 未绑定或 DOM 操作错误。
  1. VSCode 调试：
  • 配置 launch.json：
    json { "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "Launch Chrome", "url": "http://localhost:3000", "webRoot": "${workspaceFolder}" } ] }
  • 运行 npm start，按 F5 调试，设置断点检查 ref.current。

8. 中文支持

  • JSX 中的中文：直接使用 UTF-8 编码的中文：
  <input placeholder="请输入姓名" />
  • VSCode 配置：
  • 确保源文件为 UTF-8（右下角选择“通过 UTF-8 保存”）。
  • 配置终端：
    json { "terminal.integrated.env.osx": { "LANG": "zh_CN.UTF-8" } }
  • HTML 配置：确保 public/index.html 包含：
  <meta charset="UTF-8">

9. 常见问题

  • Ref 为 null：
  • 确保 ref 已正确绑定到 DOM 元素或组件。
  • 检查组件是否已挂载（componentDidMount 或 useEffect）。
  • 中文乱码：
  • 确认 public/index.html 有 <meta charset="UTF-8">。
  • 检查 VSCode 和终端编码为 UTF-8。
  • Refs 不更新：
  • useRef 创建的 Ref 对象在组件生命周期内保持不变。
  • 确保正确访问 ref.current。
  • 项目无法运行：
  • 清理缓存并重新安装：
    bash rm -rf node_modules package-lock.json npm install npm start

10. 获取途径

  • React：通过 npm 免费安装，访问 react.dev.
  • VSCode：可通过 grok.com、x.com、VSCode iOS/Android 应用免费使用（有限额）。付费订阅（如 SuperGrok）提供更高配额，详情见 x.ai/grok.
  • Node.js：免费下载，访问 nodejs.org.

如需更复杂的 Refs 示例（如滚动控制、复杂组件通信）或进一步指导，请提供具体需求！

类似文章

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注