摘要：
一、创建项目 pnpm-workspace.yaml packages: - 'packages/*' package.json { "name": "pnpm-build", "version": "1.0.0", "description": "", "main": "index.js", "s 阅读全文
随笔分类 - react
使用 React hooks 优雅解决 mp3 的播放 和 暂停
2021-05-13 12:12 by muamaker, 1184 阅读, 收藏, 编辑
摘要：
在class 组件中，我们需要在 componentDidMounted 里面给 mp3 加上监听，然后在 组件销毁的时候 去掉监听。 来控制 mp3 的播放和暂停。相对来说比较麻烦。难以抽离。 这里用 hooks 达到完全抽离的效果: interface IAudioProps extends R 阅读全文
React 代码 Import Svg as ReactComponent 失败
2021-05-09 18:06 by muamaker, 2794 阅读, 收藏, 编辑
摘要：
在 react 里面使用 svg 一、在 create-react-app 创建的项目中 方式 1、 import logo from './logo.svg'; <img src={logo} /> 缺点在于不能在修改颜色，这里其实就是直接用 img 加载了 svg 文件 方式 2、 import 阅读全文
React Hooks中父组件中调用子组件方法
2019-10-10 14:11 by muamaker, 33577 阅读, 收藏, 编辑
摘要：
React Hooks中父组件中调用子组件方法 使用到的hooks-- useImperativeHandle，useRef /* child子组件 */ // https://reactjs.org/docs/hooks-reference.html#useimperativehandle imp 阅读全文
使用 react 的 hooks 进行全局的状态管理
2019-10-09 16:40 by muamaker, 5300 阅读, 收藏, 编辑
摘要：
使用 react 的 hooks 进行全局的状态管理 React 最新正式版已经支持了 Hooks API，先快速过一下新的 API 和大概的用法。 一开始以为使用 useState 分离数据层 和 UI 层，就可以达到数据共享了，后来发现想的太简单了。分离只是逻辑共享，数据都是独立的。 后来发现有 阅读全文
react-router 5.0 的鉴权
2019-09-17 10:12 by muamaker, 4031 阅读, 收藏, 编辑
摘要：
react-router 5.0 的鉴权 当我们使用react-router 控制页面的路由时候，有些页面，是需要登录才能访问，有些不需要登录就可以访问，还有些页面，是根据用户的权限来限制访问的。 如果是传统的多页面，只需要后端鉴权就可以了，没权限就直接后端重定向。 但是单页面情况下，路由使用了 w 阅读全文
react 使用 redux 的时候 用 ref获取子组件的state
2018-10-10 18:10 by muamaker, 4087 阅读, 收藏, 编辑
摘要：
由于 redux是无状态的，所以当我们在子组件中使用了 redux的时候，再父组件中，使用 ref 来获取子组件的state时，发现为一个空对象。 其实这个是有解决方案法的，原因在于 我们使用的 redux里面的 connect 是有四个参数的 前两个经常用，文档也比较多，这里就不说了 connec 阅读全文
react-router v4 使用 history 控制路由跳转
2018-09-17 17:41 by muamaker, 5422 阅读, 收藏, 编辑
摘要：
问题 当我们使用react-router v3的时候，我们想跳转路由，我们一般这样处理 我们从react-router导出browserHistory。 我们使用browserHistory.push()等等方法操作路由跳转。 类似下面这样 import browserHistory from 'r 阅读全文
React.createClass 、React.createElement、Component
2018-09-14 13:55 by muamaker, 1384 阅读, 收藏, 编辑
摘要：
react里面有几个需要区别开的函数 React.createClass 、React.createElement、Component 首选看一下在浏览器的下面写法： React.createClass 是创建了一个react模板，使用的时候，像html标签一样，比如上面的info React.cr 阅读全文
react 全局公共组件-----动态弹窗 (dialog)
2018-09-13 14:59 by muamaker, 15832 阅读, 收藏, 编辑
摘要：
react 的时候，总是会用到弹窗，并且各种各样的，一般来说，组件层级嵌套之后，就会出现 z-index层级覆盖的问题 这个时候，就需要一个公共的弹出层，然后我们将需要展示的组件，放到弹出层里面 下面是目录结构： dialog.jsx代码 import React, { Component } fr 阅读全文
react 嵌套组件的通信
2018-09-13 14:48 by muamaker, 763 阅读, 收藏, 编辑
摘要：
在react中经常会用到的组件嵌套，如下： 图中 parent本身是一个自定义的组件，然后内部又加入了 child的自定义组件，那么这种情况，父子之间如何通信 react中在父组件里面有一个 this.props.children 当没有子组件时，值为 undefined ，只有一个子组件时，为一个 阅读全文
react全局的公共组件-------弹框 （Alert）
2018-09-10 21:59 by muamaker, 19826 阅读, 收藏, 编辑
摘要：
最近研究react，发现写一个组件很容易，但是要写一个全局的好像有点麻烦。不能像VUE一样，直接在原型上面扩展，注册全局组件 下面实现一个弹框，只需要引入之后，直接调用方法即可，不需要写入组件 给出我写react全局组件的思路。 创建一个 div加入到body，用这个div当容器，渲染react组件 阅读全文
react的super(props)
2018-09-10 17:04 by muamaker, 7014 阅读, 收藏, 编辑
摘要：
在学习react的时候，其中在构造函数里面，有一个super(props)，具体是什么意思呢。 其中 super语法来自es6，其语法如下： 我们要理解react中的super(props)，，就先看一下，es6的构造函数constructor 看如下js 在js中，类在 new 实例化的时候，系统 阅读全文
react 基本配置使用
2018-09-10 09:48 by muamaker, 5100 阅读, 收藏, 编辑
摘要：
react入门的一些配置 安装和启动 npx create-react-app my-app cd my-app npm start 创建 ts的项目： npx create-react-app demo --template typescript react默认是将 webpack配置放置在nod 阅读全文
