react
关注
分享
扫一扫
文章平均质量分 60
白马湖小龙王
我在修仙
展开
-
从0开始搭建一个简单的webpack react项目
1 初始化一个空项目npm init -y2 install webpacknpm install --save-dev webpack3 新建webpack配置文件在根目录下新建build文件夹，分别新建webpack.common.js 通用配置webpack.dev.js 开发配置webpack.prod.js 线上配置4 html模板npm install --save-dev html-webpack-plugin在根目录下新建index.html作为插件html-w原创 2021-06-28 17:31:50 · 206 阅读 · 0 评论 -
React中使用Ant Design 以Menu导航菜单形式展示Tree树形结构
目的项目分为全局路由如登录页面，404页面之类的和由侧边栏menu控制跳转的子路由页面主要是业务页面。页面子页面放入views文件夹下，将自动读入注册成route，配置文件主要用于生成树形menu侧边栏。建议配合项目结构进行阅读效果更佳效果项目结构子页面配置文件将根据以下配置文件生成树形menu导航栏export default [ { name: '测试页面', path: '/test', meta: { a原创 2020-07-14 09:29:16 · 2592 阅读 · 0 评论 -
react踩坑总结--mapStateToProps无法拿到store数据
const initialState = { user: { useName: '123', passWord: '' }}const userReducer = function(state=initialState, action) { return state;}let store =...原创 2018-07-13 19:10:37 · 7360 阅读 · 0 评论 -
React-redux数据交互实例
没有使用redux之前 1 定义state constructor(props){ super(props); this.state ={ mobile:"", password:"" } }2 在对应的input框绑定state改变的监听事件，将input中的数据通过this...原创 2018-07-17 20:27:38 · 4606 阅读 · 0 评论 -
React点击切换子组件
业务描述 在如上图所示的页面上我需要分别点击底下的三个图标将中间内容部分分别替换成对应的组件，也就是在一个大组件中分别切换三个小组件思路 通过控制css属性display:none来控制三个页面是谁来显示，中间主要是组件之间的通讯值得一说实现 1 首先简单写好三个子组件/*通讯录*/class PageChatContent extends React.Component{...原创 2018-06-07 17:04:55 · 6115 阅读 · 0 评论 -
HashRouter Cannot read property 'push' of undefined
场景 在子组件使用history跳转时失败this.props.history.push(a); Cannot read property ‘push’ of undefined原因 Router 组件的后代里头才有可能有 this.props.history 而我跳转方法所在的组件是后代组件的子组件，所以undefined了解决 将history对象...原创 2018-06-07 14:33:44 · 2694 阅读 · 0 评论 -
react实现通讯录效果
业务描述：通过react实现一个类似通讯录的页面，并可以通过点击侧边首字母跳转到对应的用户 大致效果 步骤 1，先造一批假数据 const users = [ [ {id: 0, name:"a",imgUrl:white}, {id: 1, name:'ahat',imgUrl:sy...原创 2018-06-11 15:08:36 · 3594 阅读 · 1 评论 -
JS实现生产者消费者模式的理解实例
简要 通过缓存，去中心化，降低耦合度，在这个模型中，最关键就是内存缓冲区为空的时候消费者必须等待，而内存缓冲区满的时候，生产者必须等待，从而达到动态平衡，该实例主要是关注实现这一点体验网址 http://www.oujin.fun/#/ProPage 效果图 实现思路 1/*定义全局数组当做缓存仓库*/var factoryCapacity=new Array();2定...原创 2018-05-16 17:15:23 · 3793 阅读 · 3 评论 -
React map遍历点击获取key
React map遍历点击获取key值在使用react的时候不免需要遍历循环出dom,这时候可以通过点击过去产生的的每个dom的标识来操作首先准备一个需要遍历循环的集合，可以是键值对，也可以是数组， const fromIndex=[1, 2, 3, 4, 5];JSX允许在大括号中嵌入任何表达式，因此可以 内联 map() 结果所以新建一个对象，作为map结果的载体以便插...原创 2018-04-11 10:09:47 · 14187 阅读 · 1 评论 -
React的Web端自适应布局（rem+flex）
React的Web端自适应布局（rem+flex）搭好react项目后开始画页面的时候才发现react不支持百分比布局，mmp! 后来经过一系列的调查后，决定使用rem自适应布局， rem（font size of the root element）是指相对于根元素的字体大小的单位。原理 通过js代码换算出各个屏幕的字体大小，然后1rem会等于换算出的字体大小，从而达到自适应...原创 2018-03-27 14:44:09 · 18012 阅读 · 0 评论 -
React实现百分比布局
之前百度，各位大佬说 react各种不能进行百分比布局。都推荐使用rem布局，说是 react组件之间插入了一些div，导致百分比设置高度失效了，但是按照这种思路 我在根元素那里给他设置百分比不就行了吗<html><head lang="en"> <meta charset="UTF-8"> <title></ti原创 2018-04-02 15:05:28 · 7104 阅读 · 0 评论 -
webpack4搭建react项目实现前端模块化
webpack4搭建react项目实现前端模块化首先，你得把node.js,npm装好，然后新建一个文件夹app1cmd到这个文件夹下输入指令npm init -y这时，app 下会生成一个 package.json 文件2项目中安装 webpack npm install -D webpack -D就是–save-dev 这样安装的包的名称及版本号就会...原创 2018-03-26 11:08:52 · 6525 阅读 · 1 评论 -
React填坑之react-router刷新后报错解决方法
react-router刷新后报错之前按照各种教程用BrowserHistory（官方推荐，各种吹）实现了路由跳转 效果如下 结果一刷新就报错了，各种get不到页面….. 然后，查资料说BrowserHistory要配合服务器，然后将项目打包丢在nginx 上，然而，，然并卵并没有什么卵用，然后又查了下，说要是 当nginx找不到页面时让他去找我们配置好的页面具体原因：...原创 2018-03-30 13:26:11 · 16658 阅读 · 10 评论