Category - React

2023-01-08 00:11:49    0    0    0

包含功能

  • typescript
  • stylelint
  • prettier
  • eslint
  • husky
    • git钩子
  • styled-components
  • react-app-rewired
    • 调整 create-react-app webpack 配置而不使用 'eject' 并且不创建 react-scripts 的分支。
    • 没有“无配置”限制的 create-react-app 的所有好处。您可以根据需要添加插件、加载程序。
  • customize-cra 依赖于react-app-rewired, 您需要安装它才能customize-cra工作, 增加babel-plugin-import配置动态引入Antd组件
  • babel-plugin-import
    • babel 模块化导入插件,兼容antdantd-mobilelodashmaterial-ui等。
  • antd
  • ahooks

安装create-react-app

  1. npx create-react-app my-app --template typescript

或者

  1. yarn create react-app my-app --template typescript

安装antd和定制化Create-React-App项目的两个包

  1. npm install antd --save
  2. npm install babel-plugin-import react-app-rewired customize-cra --save-dev

根目录创建config-overrides.js,用customized-cra来增加babel-plugin-import配置动态引入Antd组件

  1. const { override, fixBabelImports } = require('customize-cra');
  2. module.exports = override(fixBabelImports('import', {
  3. libraryName: 'antd',
  4. lib
2019-11-14 15:46:24    8    0    0
## **何时使用 Refs** 下面是几个适合使用 refs 的情况: - 处理焦点、文本选择或媒体控制。 - 触发强制动画。 - 集成第三方 DOM 库 如果可以通过声明式实现,则尽量避免使用 refs。 例如,不要在 Dialog 组件上直接暴露 open() 和 close() 方法,最好传递 isOpen 属性。 **** ## **不要过度使用 Refs** 你可能首
2019-11-14 15:46:24    3    0    0
### React.Fragment(`React.Fragment`组件让你在一个render()方法中返回多个元素,而不用创造一个额外的DOM) 您也可以使用简写`<>`语法来使用它, 版本要求: `React v16.2.0`
2019-11-14 15:46:24    11    0    0
1.[官网注册账号并申请Key](https://id.amap.com/) 2. 登陆之后,在进入「应用管理」 页面「创建新应用」 3. 为应用添加Key,「服务平台」一项请选择「 Web 端 ( JSAPI ) 」
``` // mapbase.js // 随机字符串(给callback使用) const key = randomStr(); // callback是地图js
2019-11-14 15:46:24    17    0    0
## 在做react项目时,有时候需要将后台传过来的html的字符串变成真正的结构渲染到页面,如果直接插入的话页面显示的就是这段字符串,而不会进行转义,可以用以下方法插入,便可以html的形式展现:
这里是自己要渲染的数据内容

"}} />
2019-11-14 15:46:24    9    0    0
### axios Content-Type: multipart/form-data(上传文件) let formData = new FormData(); formData.append('appkey', 'njssdjtkj'); formData.append('sign', sign); formData.appen
2019-11-14 15:46:24    56    0    0
### pc端-ui库 > 1. Ant Design of React 文档: https://ant.design/docs/react/introduce-cn *** ### H5端-ui库 > 1. Ant Design Mobile of React 预览: https://mobile.ant.design/kitchen-sink/ 文档:
2019-11-14 15:46:24    4    0    0
> 1. 调试组件 React Developer Tools 2. 调试redux Redux DevTools
2019-11-14 15:46:24    7    0    0
> 官网: https://nervjs.github.io/taro/docs/README.html
2019-11-14 15:46:24    67    0    0
## `::`在React中的意义 ### 我在看一些项目的时候遇到了::这种写法,查了之后才知道这种是ES7针对.bind的新语法。 #### 例如:在React中我们常见的写法是,那么ES7中我们可以按照如下格式方法书写 ``
1/2