React
前端学习
super苏然
java开发工程师
展开
-
React路由设置
路由的意思就是分页,实现不同页面的跳转。在React框架下需要先安装对应的依赖库:npm install --save-dev react-router-dom然后创建项目,我用的是WebStorm开发工具。我将App.js改为了router.js,导入包这里需要说明一下,HashRouter和BrowserRouter可以互换使用,区别在于HashRouter在浏览器页面显示时会出现#号,如图,而BrowserRouter则不会,如图。下面导入了3个页面,分别是IndexPage,NewsPa原创 2020-05-19 14:35:01 · 435 阅读 · 0 评论 -
React+boot实现分页查询数据,渲染到前端页面(2020.5.15)(未完待续)
看图说话。先讲思路:SQL语句:Select * from table limit a,b;(这个a为数据的脚标,也就是从什么地方查起,b就是每次需要查询的个数) 注:a和b在下面文字中会涉及。前端发送请求到后台查询数据时,一般为全部查询,就是把所有的数据一次性查询完毕,返回到前端页面,然后进行页面渲染。但是,这样也有弊端,比如数据量很大,接收的时候消耗资源就多,而我们也不需要一次性返回那么多数据,这就可以转变为分页查询。当我们在数据展示页面点击下一页的时候,会对当前页设定的 a 进行递增原创 2020-05-15 17:39:59 · 1032 阅读 · 0 评论 -
React:Failed prop type: You provided a `value` prop to a form field without an `onChange` handler. T
错误截图:原因:原因是因为input标签,没有定义onChange 但是提供了value属性。React会抛出警告,并将元素设置为只读。如果目标是只读字段,最好使用readOnly属性明确加以定义。这不仅会消除警告,也会确保代码的可读性。解决:可以添加readOnly={true} ,或者直接添加readOnly属性,而不设置值,React会默认将该属性的值设为true。...原创 2020-04-23 18:20:25 · 6054 阅读 · 0 评论 -
安装antd
1.安装npm install --save antd@4.1.32.引入自动导包的插件npm install babel-plugin-import --save-dev3.在根目录创建新文件.babelrc,放入以下代码{ "plugins": [ ["import", { "libraryName": "antd", "libraryDire...原创 2020-04-14 16:34:31 · 2176 阅读 · 0 评论 -
React兼容低版本浏览器(IE)和fetch兼容低版本浏览器
npm install url-search-params-polyfill --save原创 2020-04-16 14:48:59 · 961 阅读 · 0 评论 -
React的CSS模块化(class和className)
外部引用需要使用className,react默认不支持class。如果想使用传统的class来获取样式,需要下载安装react-html-attrs插件。npm install babel-plugin-react-html-attrs --save-dev...原创 2020-04-22 08:58:08 · 1930 阅读 · 0 评论 -
React的qs插件
npm install qs;let data= { "photo":headFile }axios({ headers:{'Content-Type':'application/x-www-form-urlencoded'}, method:'post', url:'http://127.0.0.1:80...原创 2020-04-17 19:59:58 · 1778 阅读 · 0 评论 -
React框架封装一个axios请求的方式和fetch请求方式
1、request库//导入axiosimport axios from 'axios';//设计为一个方法调用,method默认值为“get“,data为数据,config为上传图片时的加载进度export function request(url,method="get",data={},config={}) { return axiosRequest(url, method...原创 2020-04-17 08:49:11 · 834 阅读 · 0 评论 -
React框架子组件给父组件传值
父:import React from 'react';import "./assets/css/app.css";import Header from './components/header';import Input from './components/input';class App extends React.Component { constructor() {...原创 2020-04-13 17:43:42 · 117 阅读 · 0 评论 -
React框架表单全选和批量删除
import React from 'react';import "./assets/css/app.css"import index from "postcss-normalize/index.esm.mjs.map";class App extends React.Component { constructor() { super(); thi...原创 2020-04-13 16:54:35 · 1392 阅读 · 0 评论 -
React框架的点击事件(方式)
import React from 'react';import "./assets/css/app.css"class App extends React.Component { constructor() { super(); this.state={ } } click(val){ alert(v...原创 2020-04-13 14:01:52 · 839 阅读 · 0 评论