github地址: https://github.com/YepFury/react-table-demo
趁着项目间歇,试着写了一下未接触的react,找了一下资料,决定使用ant-design组件库,因为基本是完全的react新手,因此对着官网教程及查询资料简单的实现了一下使用vue实现过的表格+弹窗。
Ant-Design
npm install yarn -g
npm install create-react-app -g
create-react-app table-demo
工具会自动初始化一个脚手架并安装 React 项目的各种必要依赖
yarn eject && y
虽然脚手架回安装一些依赖,但是缺了必要的组件库以及一些常用库
yarn add antd
yarn add axios
cd table-demo
yarn start
因为习惯使用less,所以还是打算在react中使用less语法,在项目中配置less语法的方法除了antd官网介绍的自定义主题,使用react-app-rewrite-less
插件外,还有就是在对应的webpack配置文件中修改,即修改webpack.config.dev.js
和webpack.config.prod.js
,修改如下:
webpack.config.dev.js
// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
+ const lessRegex = /\.(less)$/;
+ const lessModuleRegex = /\.module\.(less)$/;
//...
module.exports = {
module: {
rules: [
+ {
+ test: lessRegex,
+ exclude: lessModuleRegex,
+ use: getStyleLoaders({importLoaders: 2}, 'less-loader')
+ },
+ {
+ test: lessModuleRegex,
+ use: getStyleLoaders(
+ {
+ importLoaders: 2,
+ modules: true,
+ getLocalIdent: getCSSModuleLocalIdent,
+ },
+ 'less-loader'
+ ),
+ },
]
}
}
webpack.config.prod.js
// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
+ const lessRegex = /\.(less)$/;
+ const lessModuleRegex = /\.module\.(less)$/;
//...
module.exports = {
module: {
rules: [
+ {
+ test: lessRegex,
+ exclude: lessModuleRegex,
+ loader: getStyleLoaders(
+ {
+ importLoaders: 2,
+ sourceMap: shouldUseSourceMap,
+ },
+ 'less-loader'
+ ),
+ },
+ {
+ test: lessModuleRegex,
+ loader: getStyleLoaders(
+ {
+ importLoaders: 2,
+ sourceMap: shouldUseSourceMap,
+ modules: true,
+ getLocalIdent: getCSSModuleLocalIdent,
+ },
+ 'less-loader'
+ ),
+ },
]
}
}
/services/request.js
import axios from 'axios';
const request = axios.create({
baseURL: 'http://192.168.x.x:7788/api',
timeout: 10000,
headers: {
'Content-Type': 'application/json'
}
})
request.interceptors.request.use(config => {
return config;
}, error => {
return new Promise.inject(error);
})
request.interceptors.response.use(response=>{
return response.data
},error=>{
new Promise.inject(error)
})
export default request;
/services/api.js
将请求方法进行封装,统一管理import request from './request';
export async function getTableData(params) {
return request.get('/table/allData', {
params: params
})
}
// post all
修改 src/App.js
,引入 antd
import React, { Component } from 'react';
修改 src/App.css
,在文件顶部引入 antd/dist/antd.css
。
@import '~antd/dist/antd.css';
引入完之后按照自己的需要引入不同的组件使用即可,过程可参照antd官方文档。
github地址: https://github.com/YepFury/react-table-demo
// 父组件
import React, {Component} from 'react';
import ChildComponent from 'ChildComponent';
class ParentComponent extends Component {
state = {
message: '我来自父组件'
}
render(){
return (
<ChildComponent msg={this.state.message}></ChildComponent>
)
}
}
// 子组件
import React, {Component} from 'react';
class ChildComponent extends Component {
render() {
return (
<h3>来自父组件的消息说:{this.props.msg}</h3>
)
}
}
// 子组件
import React, {Component} from 'react';
class ChildComponent extends Component {
state ={
message: '我是来自子组件的消息'
}
toParent(){
this.props.toParent(this.state.message);
}
render() {
return (
<h5 onClick={this.toParent.bind(this)}>去给父组件说</h5>
)
}
}
// 父组件
import React, {Component} from 'react';
import ChildComponent from './Modals';
class ParentComponent extends Component {
state = {
message: ''
}
handleFromChild(msg) {
this.setState({
message: msg
})
}
render() {
return (
<div>
<h3>来自子组件的消息是:{this.state.message}</h3>
<ChildComponent toParent={this.handleFromChild.bind(this)}></ChildComponent>
</div>
)
}
}
在子组件上调用父组件的方法都需要使用
bind
修改this
指向,不然会为null
父组件传递给子组件的数据更新但不渲染
因为接触有限,因此在子组件接受到父组件传递来数据更新之后无法重新渲染,通过this.props获取到的值已经发生改变,还是无法重新渲染,试过在不同的生命周期调用方法,还是没用,最后只能在父组件动手脚。
通过子组件传递给父组件状态来销毁子组件,然后再重新渲染。(具体看代码)
this.setState设置值
因为this.setState是异步方法,因此需要在设置完state之后调用方法的话,需要用到它的第二个参数,回调函数功能
this.setState({
message: 'newMsg'
},()=>{
console.log(this.state.message)
})