前端kk的博客

网页根据返回总秒数到计时

权限控制算是软件项目中的常用功能了。在网站中，权限控制一般分为两个维度：页面级别和页面元素级别。我们来说说页面元素粒度的权限控制。在某个页面中，有个“创建用户”的按钮，管理员才能看到。一般想到的做法类似这样class Page extends Component{ render() { let hasCreatePermission = tool.getAuth("createUser...

想必大家在使用react-router的时候，有的组件是需要登录才能访问的（private），有的是开放的（public）现在给大家介绍一下我的实现方式（仅供参考，如有更好的思路，欢迎在评论区回复）1.第一种封装一个私有路由这是我的路由配置，Route大家都知道。不用多讲。PrivateRoute 这个是我自己封装的代码如下：PrivateRoute.jsximport React from ...

dva 中页面过渡效果封装的很好，下面介绍常用的两个 js 库。之前对 dva-loading 理解存在误区，认为只要在 index.js 中配置一下就没事了，事实上 dva-loading 只是提供当前异步加载方法的状态（异步加载中状态为 true，异步加载完成状态为 false），对应加载样式由各自组件自己控制，如：Antd 中 Table 组件自身的 loading 属性。并添加完整流程示例...

withRouter包装一下

说明React官方脚手架工具Create-react-app 用于快速创建React应用，但依旧有局限性，我们根据项目需求需要对Create-react-app的配置进行修改。这里针对引入Antd的两种配置方式进行配置。方案一. React-app-rewired（一个对 create-react-app 进行自定义配置的社区解决方案）。 1. 安装react-app-rewirednpm ins...

目的：简化代码 工具：create-react-app 插件：cnpm install babel-plugin-transform-decorators-legacy –save-dev 条件：执行npm run eject命令，因为得自己配置下1、配置package.json文件 2、connect// 数据const mapStateToProps = (state) => { ...

用dva-cli作为脚手架建立工程后，开始尝试编写页面。然后立马发现一个坑爹的问题。在我less文件里面写了一个class ,比如：MainHead。但是编译出来之后发现css文件里面变成了 MainHead__xuaz，多了一个后缀，坑爹嘛这是！！！一番查找后发现原来是引用了css-modules这个包。为了卸载这个包，我翻找了半天。照例来说应该在webpack的时候屏蔽这个包。可惜node项目...

最近做一个H5项目，数据交互量比较大，很多页面都是从后台拿过来数据做一个列表显示，这自然就遇到了滚动。刚开始我直接使用css做法，直接添加overflow: scroll;但在微信端用户滑动会直接将整个页面拖动，露出顶部的域名和底部的黑色背景。用户反映体验不好，要改……好吧，自己动手。但这并不是好改的，因为在React中都是构建的是虚拟DOM，直接操作DOM也会对性能有一定影响。这时候网上搜了一下...

此前，我使用了react-router库来完成单页应用的路由，从而实现组件之间的切换能力。然而，默认页面的切换是非常生硬的，为了让页面切换更加缓和与舒适，通常的方案就是过渡动画。这里我调研了2种实现方案，它们都能够为react-router实现路由切换时的过渡效果，第1种是react官方自带的ReactCSSTransitionGroup（官方，推荐），第2种则是react-router-tr...

基于 iscroll 实现的 react 组件第一步：引入插件npm install reactjs-iscroll --save 可在项目下的package.json文件内dependencies下看到安装好的插件版本；第二步：在项目中使用import iScroll from 'iscroll/build/iscroll-probe'; 表示引入scroll库，可支持onscr...

执行eject在项目中执行 $ npm run eject 这个命令只能执行一次，而且不可逆转，它会把react-scripts 封装的一些webpack配置等全部解压到项目目录，项目结构中会多出 config 目录 和 scripts 目录，我们的需要配置的地方就在config 目录中, 其中有两个文件需要需改：webpack.config.dev.js 和 webpack.config.p...

  源码 : https://github.com/junwei1114/dva-cli-init

不是一个东西，功能虽然都是序列化。假设我要提交的数据如下var a = {name:'hehe',age:10};qs.stringify序列化结果如下name=hehe&age=10而JSON.stringify序列化结果如下："{"a":"hehe","age":10}"...

解决方法有一下几种服务器端配置CORS 用nginx反向代理,和访问本地服务器是一样的 可以修改成正式线上的地址，再build推荐使用nginx配置反向代理，这样就可以在前端彻底解决跨域问题。...

在React 中使用百度地图，高德地图出现'AMap' is not defined 'BMap' is not definedindex.html<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的key"></script><sc...

在用creata-react-app脚手架构建react项目的时候，发现默认配置是不支持sass和less预编译的，对于习惯less写法的我来说是万万不能接受的，于是就百度查找“create-react-app配置less”，然后得出解决办法就是执行npm run eject，作用就是把之前的默认配置全部暴露出来，因此可以自定义修改webpack的配置。如图：执行成功之后再次启动项目 npm st...

http://618cj.com/react-router4-0%E8%B7%AF%E7%94%B1%E4%B8%AD%E6%96%87%E6%96%87%E6%A1%A3api/

大家好，最近有点忙，忙什么呢？忙着学习一个新的框架Redux，那么这个框架主要是用来做什么的，这篇博客暂时不做介绍，这篇博客针对有一定Redux开发基础的人员，所以今天我讲的重点是Redux里面很重要的一个方法-combineReducers(reducers)。（一）官网介绍首先，按照惯例，这个方法是什么，干什么用，输入是什么，输出是什么，这些都是我们要了解的，所以我们先来看看官网是如何介绍它的...

仔细想想，我们的后台系统还没有一个登录功能，太不靠谱，赶紧把防盗门安上！SPA的鉴权方式和传统的web应用不同：由于页面的渲染不再依赖服务端，与服务端的交互都通过接口来完成，而REASTful风格的接口提倡无状态（state less），通常不使用cookie和session来进行身份认证。比较流行的一种方式是使用web token，所谓的token可以看作是一个标识身份的令牌。客户端在登录成功后...

 dangerouslySetInnerHTML={{ __html: htmlString}}return (        <div>{props.record.contents.map(value =>          (            <div className={styles.expendBlock}>              <p da...

1. 安装nodenode js 官网安装完成之后，打开命令提示符 输入 npm 出现下列提示说明安装成功2. 根据react 官网提示，在命令提示符输入npm install -g create-react-app经过一段时间的等待， 安装成功然后按上图所示输入命令证明react安装成功， 接下来就创建一个react工程 吧。经过一段时间的等待， 工程创建成功，先cd 到项目根目录下 然后 np...

官方文档对redux的介绍：Redux是JavaScript状态容器，提供可预测化的状态管理。注意，redux的集成是非必选的。通过之前的内容介绍我们了解到，单枪匹马的react构建的页面也可以运作得很好。你可能会对redux的编程方式感到无所适从。然而，不管是出于构建大型应用考虑，还是作为进一步的技能提升，redux绝对是一个值得你花时间去学习的框架。我到底是想说什么。。。好吧，啰嗦就到此为止，...

最近一直在学习 redux, 感到了深深的难过，都两天了，感觉还是不知道怎么写代码，倒不是不知道是Redux 里面涉及的概念，是不知道什么代码该放在哪里。怎么样组织结构。希望再过两天能更清晰。下面是中间学习到的 combineReducers 和 createStore 的实现原理，了解这些后，确实帮助了我更好的理解整个流程。combineReducers 的实现原理在探究 combineRedu...

在组件的整个生命周期中，随着该组件的props或者state发生改变，其DOM表现也会有相应的变化。一个组件就是一个状态机，对于特定地输入，它总返回一致的输出。一个React组件的生命周期分为三个部分：实例化、存在期和销毁时。实例化当组件在客户端被实例化，第一次被创建时，以下方法依次被调用：1、getDefaultProps2、getInitialState3、componentWillMount

react 上拉刷新下拉加载https://www.cnblogs.com/qq120848369/p/5920420.htmlhttp://blog.youkuaiyun.com/sinat_17775997/article/details/64127482

版权声明：本文为博主原创文章，未经博主允许不得转载。Facebook对react进行持续的改进，路由作为其中最重要的一部分，在4.0版本对其进行了大量的优化，总的来说，简单易用！之前使用react路由的时候，我们引入的是react-router包。现在改版之后，我们引入的包是react-router-dom包。改版之后的react-router-dom路由，我们要理解三个概念，Router、R...

react router 4.0以上的路由应用在4.0以下的react router中，嵌套的路由可以放在一个router标签中，形式如下,嵌套的路由也直接放在一起。<Route component={App}> <Route path="groups" components={Groups} /> <Route path="users" compon...

原文链接： https://crystalvon77.github.io/2017/07/13/react%E6%89%93%E5%8C%85%E9%81%87%E5%88%B0%E7%9A%84%E9%97%AE%E9%A2%98/刚开始学习react，遇到一些小问题．我使用的是create-react-app脚手架生成的项目。这个脚手架一键生成react项目，非常方便。先简单记录一下这个新建项...

1.登陆是我们要用fetch进行登陆验证后，跳转，下面讲一下具体操作：首先，引入需要的库2.在login页面我们需要拿到用户输入的name和password，如下：在1部分是记住密码，保存在本地存储localStorage中；在2部分是调用fetch函数进行数据传输；在3部分是当打开这个页面时，如果有本地存储的值，及选了记住密码之类的，就在页面渲染3.在fetch函数中我们需要做什么呢？提交url...

1.antd-mobile是由蚂蚁金融团队推出的一个开源的react组件库，这个组件库拥有很多使用的组件，下面我来介绍一下他的用法：2.按照官网http://beta.mobile.ant.design/docs/react/introduce-cn上的操作步骤：[html] view plain copynpm install antd-mobile@next --save  3.在你的项目中的...

首先封装get：（get.js）[javascript] view plain copyimport 'whatwg-fetch'  import 'es6-promise'    export function get(url) {      // var result = fetch('http://www.mockhttp.cn'+url, { //打包apk时候使用      var re...

create-react-app是FaceBook官方出品的一个React.js脚手架工具,集成了webpack等调试和打包工具,具体可以查看Github:https://github.com/facebookincubator/create-react-app其默认支持css的import,但是不支持less,本文介绍如何简单的增加less的支持。在create-react-app生成的项目文件...

我在使用redux过程中遇到Actions must be plain objects. Use custom middleware for async actions.异常的分析原因一：使用异步actions时，没有配置redux-thunk这个中间件中间件就是一个函数，对store.dispatch方法进行了改造，在发出 Action 和执行 Reducer 这两步之间，添加了其他功能。imp...

在开发中，重定向和404这种需求非常常见，使用React-router4.0可以使用Redirect进行重定向最常用的就是用户登录之后自动跳转主页。?1234567891011121314151617181920212223242526272829303132333435363738import React, { Component } from 'react';import axios from...

react-router打包后无法通过路由进入到页面，是因为当我们使用react-router-dom里的BrowserRouter as Router时，是用浏览器history对象的方法去请求服务器，如果服务器没有相对于的路由去指向对应的页面路由会找不到资源。BrowserRouter会变成类似这样的路径  http://111.230.139.105:3001/detail/9459469，...

React 0.14 引进了一种更简单的方式来定义组件，也就是无状态组件。这种组件使用了原生Javascript 函数，下图就是在用ES6的情况下，React 0.14 之前版本的组件写法和它之后对应的组件写法。前者用了27行代码来实现，而后者只用了21行，这当然也没有什么了不起的。需要说明的是，由于性能方面的原因，右边代码中的sayHi 函数应该尽量避免这样使用。（原因见文末评论