![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
爱健身_程序猿
这个作者很懒,什么都没留下…
展开
-
reat图片引用统一管理
图片统一管理原创 2022-08-09 17:15:49 · 194 阅读 · 0 评论 -
react项目搭建
1 创建React-APP通过官方的create-react-app,找个喜欢的目录,执行:npx create-react-app app-name稍等片刻即可完成安装。安装完成后,可以使用npm或者yarn启动项目。或者直接在vscode中打开项目,执行start命令启动项目。项目文件结构如下图:2 精简项目2.1删除不用的文件删除后目录如下:2.2简化代码逐个修改以下文件:src/App.js代码简化如下:import React from '...原创 2022-03-12 11:31:23 · 3345 阅读 · 0 评论 -
react国际化
此篇文章是用i18next库来react的国际化。一、安装依赖总共需要安装三个:i18next,i18next-browser-languagedetector,react-i18next二、初始化和语言文件 在src下新建目录:locale初始化:index.js。import i18n from 'i18next';import { initReactI18next } from 'react-i18next';imp...原创 2021-12-20 15:42:49 · 569 阅读 · 0 评论 -
antd Tabs组件自定义头部
antd的Tabs组件,用renderTabBar自定义TabBar。直接上代码:import React, { Fragment, useEffect, useState, useRef } from 'react'import styles from './style.module.scss'import classNames from 'classnames/bind'import { Tabs, Collapse } from 'antd';const { TabPane } =原创 2021-11-04 12:10:12 · 6352 阅读 · 0 评论 -
文字跑马灯
上下滚动,当前内容文字超过屏幕宽度时,会把当前文字向左移动,看完后,再向下滚动到下一条文字。直接上代码:import React, { useImperativeHandle, useRef, useState, useEffect } from "react";import { useMount } from "ahooks";import styles from './style.module.scss'import classNames from 'classnames/bind'原创 2021-11-03 10:54:19 · 187 阅读 · 0 评论 -
react antd table组件使用笔记
前端工作中选择了antd 的table组件,做一下笔记。一、安装antd使用 npm 或 yarn 安装$ npm install antd --save$ yarn add antd二、引用import { Table } from 'antd';const { Column } = Table;此次使用的是JSX 风格的 API,这个只是一个描述columns的语法糖,不能用其他组件去包裹Column和ColumnGroup。三、个人使用笔...原创 2020-11-04 12:08:40 · 2494 阅读 · 0 评论