joken-前端工程师

摘要： git config --global alias.cm '!git commit --no-verify' cm 是自定义命令名字 字符部分是自定义命令执行内容 阅读全文

摘要： Zustand 是一个轻量且易于使用的状态管理库，适用于 React 应用。它提供了简单而强大的 API 来管理全局状态，并且与 React 的开发体验非常契合。下面我们将通过一个具体的案例来探讨 Zustand 的使用，并解释其优势。 🧩 什么是 Zustand？ Zustand 是一个基于 R 阅读全文

摘要： 完善Tailwind CSS IntelliSense插件配置指南 一、插件安装 打开VS Code扩展市场 搜索"Tailwind CSS IntelliSense"插件 点击安装 二、VS Code用户配置 安装完成后，需要在VS Code中进行额外配置以确保插件在tsx文件中正常工作： 打开V 阅读全文

摘要： index.tsx import { observer } from "mobx-react-lite"; import React, { useEffect } from "react"; import counterStore from "./store"; // 将组件包装为观察者组件 con 阅读全文

摘要： 在 React 中实现子组件向父组件暴露数据和方法的实践 在 React 的组件开发中，我们经常需要实现父子组件之间的通信。通常情况下，我们使用 props 从父组件向子组件传递数据和方法。但在某些特殊场景下，我们需要让子组件主动暴露数据和方法给父组件。本文将通过一个具体示例来演示如何实现这一需求。 阅读全文

摘要： 示例代码 import React, { useState, useTransition } from "react"; const App = () => { const [isPending, startTransition] = useTransition(); const [inputVal 阅读全文

摘要： React 中模拟实现 Slot 插槽功能的示例教程 在 React 中虽然没有原生的 slot 语法（如 Vue 或 Web Components），但可以通过 props.children 或命名插槽的方式来模拟类似功能。本文将基于两个组件文件详细讲解一个使用“插槽”模式的完整示例。 📁 文件 阅读全文

摘要： 🎨 Tailwind CSS 在项目中的使用总结 1. 🧱 项目结构概览 你的 React 管理后台模板项目集成了 Tailwind CSS，用于构建响应式、高度定制化的 UI 组件。主要文件结构如下： src/ ├── index.css ├── tailwind.config.js └── 阅读全文

摘要： 🧠 React Context 使用总结 1. 创建 Context 在 TestModalContext.tsx 中创建了一个 Context，用于跨组件层级共享数据。 export const TestModalContext = createContext<TestModalContextT 阅读全文

摘要： 在 React 18 中，Outlet 是由 React Router（通常是 react-router-dom）提供的组件，用于在嵌套路由中渲染子路由的内容。它是 React Router v6 及以上版本中实现嵌套路由的核心组件。 Outlet 的作用 Outlet 充当子路由的占位符，告诉 R 阅读全文

摘要： React 的 <Suspense> 组件来处理异步加载内容，具体用在 [react-router-dom](file://f:\my_code_2024\react-template-admin-main\node_modules\react-router-dom) 的 <Outlet /> 上， 阅读全文

摘要： 列表代码 import React, { useState, useMemo } from "react"; import { Space, Table, Tag, Form, Input, Button, Pagination } from "antd"; import type { TableP 阅读全文