teng2015 / react-table-demo

react+antd =>table+modal

初学者使用react+antd实现表格+弹窗

趁着项目间歇，试着写了一下未接触的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，修改如下：

1. 修改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'
          +     ),
          + },
        ]
    }
}

2. 修改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'
          +     ),
          + },
        ]
    }
}

开发

创建文件目录

创建文件

1. /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;

2. /services/api.js 将请求方法进行封装，统一管理

import request from './request';

export async function getTableData(params) {
    return request.get('/table/allData', {
        params: params
    })
}
// post  all

引入antd

修改 src/App.js，引入 antd

import React, { Component } from 'react';

修改 src/App.css，在文件顶部引入 antd/dist/antd.css。

@import '~antd/dist/antd.css';

引入完之后按照自己的需要引入不同的组件使用即可，过程可参照antd官方文档。

效果图

github地址： https://note.youdao.com/

开发过程中的问题

1. 父子组件之间的传值

• 父传子

// 父组件
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>
        )
    }
}
export default ChildComponent;

// 父组件
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>
        )
    }
}
export  default ParentComponent;

2. 子组件上调用父组件方法

在子组件上调用父组件的方法都需要使用bind修改this指向，不然会为null

3. 父组件传递给子组件的数据更新但不渲染 因为接触有限，因此在子组件接受到父组件传递来数据更新之后无法重新渲染，通过this.props获取到的值已经发生改变，还是无法重新渲染，试过在不同的生命周期调用方法，还是没用，最后只能在父组件动手脚。

   通过子组件传递给父组件状态来销毁子组件，然后再重新渲染。（具体看代码）

4. this.setState设置值

因为this.setState是异步方法，因此需要在设置完state之后调用方法的话，需要用到它的第二个参数，回调函数功能

    this.setState({
        message: 'newMsg'
    },()=>{
        console.log(this.state.message)
    })