一直想着能本地化antd的,不用npm以及dva那么复杂的配置环境来开发,并且本地化以后对以后链接flask的模板渲染机制也能很好的结合.下面是具体的实现方法: 1.将react的相关链接引入: <script src="/static/react/react.min.js"></script> <script src="/static/react/react-dom.min.js"></script> <scr

一.需求 用户对不同的应用需要有不同的权限,用户一般和角色关联在一起,新建角色的时候会选择该角色对应的应用,然后对应用分配权限.于是写了一种实现的方式.首先应用是一个二级树,一级表示的是应用分组,二级表示的是应用,这是table的最左边的数据.然后是按钮的数据,这里显示在table的头部. 二.效果图如下 三.具体代码 1.RoleApplicationTable.js import React from 'react'; import RoleCheckbox from 'components

React框架已经火了好长一段时间了,再不学就out了! 对React还没有了解的同学可以看看我之前的一篇文章,可以快速简单的认识一下React.React入门最好的实例-TodoList 自己从开始接触react一窍不通,到慢慢的似懂非懂,通过各种途径学习也有一阵了.学习过程中还会接触到很多新的东西,比如ES6.webpack,过程艰辛谁人懂,见坑填坑慢慢来.今天把学习过程过滤了一下,只说项目实际需要用的东西,总结了一套能看到的东西,分享给大家,希望能让读者少踩一些坑! 本文看点 实际项目效果

引用form是第三方插件ant插件,官网网址:https://ant.design/.用到的antd的版本是@2.0.1.form(https://ant.design/components/form/)表单页面的大概样子如下:

使用React.js + Redux + antd 制作CMS 后台内容管理系统,分享一点点积累,欢迎讨论. 在this.state中初始化数据: this.state = { pageNum:1, /*翻页查询*/ pageSize:10, /*分页查询*/ activePage: 1, /*默认显示一页*/ selectedRowKeys: [], // 这里配置默认勾选列 loading: false, /*antd*/ selectedRow:[] } 在制作过程中,根据需要把antd的

antd 主页地址:https://ant.design/docs/react/introduce 在使用过程中,不能照搬antd的组件代码,因为有些并不合适.首先,菜单并没有做跳转功能,仅仅是菜单,需要在它的基础方法中添加我们的业务代码. /*菜单组件,所有的方法都要bind this*/ import React,{Component} from 'react'; import {render} from 'react-dom'; import {Link,browserHistory} f

公司使用的的react.js的版本提14.7的,JS版本使用的是ES6语法,因此在使用antd过程中,有些许不愉快的记录,分享给大家,一起学习: 如果是react 14.7版本时,使用getFieldDecorator API时会后错,直接使用getFieldProps代替,即可 this.props.form 中含有大量的方法,可以去这里调用 刚开始使用大部分的报错是因为antd中的方法都没有 bind(this) 绑定this,只要绑定this即可 使用antd组件不能直接export de

调整 ANTD 组件菜单的字体大小:经过多次试验,原有字体太小,只有12px,通过下列CSS 强制加大. 1.分组子菜单(标题) .ant-menu-inline > .ant-menu-submenu > .ant-menu-submenu-title{ font-size: 15px !important;} 2.菜单项 .ant-menu-inline > .ant-menu-item{ font-size: 15px !important;}

1,react中文文档http://reactjs.cn/react/docs/thinking-in-react-zh-CN.html 2,antd文档 https://ant.design/docs/react/introduce

Semantic-UI-React: http://react.semantic-ui.com/ ANTD :http://ant.design/ Amaze UI React: http://amazeui.org/react/

标题也不知道怎么写好,真是尴尬.不过话说回来,距离上一次写文快两个月了,最近有点忙,一直在开发新项目, 今天刚刚闲下来,项目准备提测.借这个功夫写点东西,把新项目上学到的一些好的干活分享一下,以便之后开发的 时候能烂熟于心. 本次分享两个干货,正文从这里开始: 1.很多同学在开发项目前端项目的时候会遇到一个比较影响开发体验的事情,就是在更新样式文件的时候,页面不会热更新.当然前提是在webpack配置项里用了 'extract-text-webpack-plugin'这个分离css样式的插件.当

1.安装dva-cli npm install dva-cli -g 2.创建应用 dva new dvadashboard   [dvadashboard为项目名]       3.安装mockjs npm install mockjs --save 4.配置mockjs 打开.roadhogrc.mock.js 设置如下 const fs=require('fs'); const path=require('path'); const mockPath=path.join(__dirname

前提条件:node和ruby on rails必须已经安装好(相关安装流程不再此处介绍) 1.nvm.node 2.npm or yarn装一个就好 3.rvm.ruby on rails 4.foreman 一.新建一个rails项目后加入react gem包 1.Gemfile文件添加gem 'react_on_rails', '~>6' # use latest gem version > 62.bundle install安装gem包3.rails generate react_on_

如果是自己配置的reac项目,而非官方推荐的creat-react-app或者dva-cli等阿里自己开发的脚手架去引入antd,会有两个问题 第一,用babel-plugin-import设置style true 并不能通过less的方法引入antd 的样式.只能自动引入css.需要手动去引入less文件导入样式. 第二,既然无法自动按需引入less文件也就无法去改主题色,即使手动引入全局的antd,去改 primary-color 也不能生效. 即使在loader 添加options{"mo

首要问题: 如何增加菜单项 答案: 在router.config中添加路由,在locales语言国际化增加选项 问题1: 答案1: 问题2: 这个要修改state,正确写法 存在的疑惑:为什么不能直接修改值,非得要去dispatch一下吗? 经过指点:为了解耦,大型项目的优点, 问题3:这样发送了请求,但是请求地址变成了追加,这是怎么回事,我还没有想清楚 问题4:发送请求,或者说解决代理 运行时命令:npm run start:no-mock这是修改代理 这是修改请求地址: 这样就可以请求到结果

最近项目中,有一个需求是自定义antd的Tree组件的右键菜单功能. 直接上代码 class Demo extends Component { state = { rightClickNodeTreeItem: { pageX: "", pageY: "", id: "", categoryName: "" } } // tree列表上右键事件 onRightClick = e => { this.setState({

好久之前搭建的一个react执行环境,受历史影响是webpack3.10.0和webpack-dev-server2.7.1的环境,新项目准备用webpack4重新弄弄了,旧的记录就合并发布了(在没有快速目录的地方写的,之前是分为了10个文件) 所使用的一些包可能进过不断的迭代升级已不支持 01.初始化项目(安装需要的包) //生成package.json npm init 安装基础包 npm install react react-dom --save npm install webpack@

antd 的 Tree 控件没有提供点击展开的功能,只能通过左边的三角形实现展开和收起,没办法只好自己实现这个功能. 先看效果 如图实现的是类似 Mac 文件目录形式的结构,有箭头代表是个文件夹,点击展开文件夹,点击外层文件夹可以收起整个文件夹. 首先根据服务器返回的 Json 数据生成树形结构 const data = { name: "root", children: [{ name: "a", value: "/a", children:

[描述] 按照antd官网步骤 https://ant.design/docs/react/use-with-create-react-app-cn 最后yarn start会报错 [解决方法] 原因是react-scripts 升级到 2.1.2 以后破坏了 react-app-rewired 解决方法,对react-scripts进行降级处理 yarn add react-app-rewired@2.0.2-next.0 参考: https://blog.csdn.net/weixin_39

同时编译antd和css module,需要设置两次less识别. { test: /\.less$/, exclude: path.resolve(__dirname, './node_modules'), use: extractTextPlugin.extract({ // 如果编译自己写的less,用css module, 就要过滤antd. use: [{ loader: 'css-loader', options: { minimize: false, modules: true,

安装babel-plugin-import插件.下面方法二选一,都可以实现antd的按需加载. 一.配置webpack.config.js文件 { test: /.jsx?$/, exclude: /(node_modules|bower_components)/, use: [{ loader: 'babel-loader' }], options: { "plugins": [ [ "import", { "libraryName": &qu