react-app-antd 搭建

安装nodejs

https://nodejs.org/en/download/

安装webpack

npm install webpack -g

安装yarn

https://github.com/yarnpkg/yarn/

https://yarnpkg.com/en/docs/install#windows-stable

参考
https://ant.design/docs/react/use-with-create-react-app-cn

 

yarn create react-app myapp

cd myapp

yarn add antd

按需加载

yarn add react-app-rewired customize-cra

yarn add babel-plugin-import

自定义主题

yarn add less less-loader

其他组件  
https://ant.design/docs/react/recommendation-cn

路由
yarn add react-router-dom

复制文件
config-overrides.js

const { override, fixBabelImports, addLessLoader } = require('customize-cra');
module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: 'css',
        style: true,
    }),
    addLessLoader({
        javascriptEnabled: true,
        modifyVars: {
            //'@primary-color': '#aa0400'
        },
    }),
);

package.json 部分文件

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  },

App.js

import React,{Component} from 'react';
import { Button,Layout, Menu, Breadcrumb, Icon } from 'antd';
import logo from './logo.svg';
import { HashRouter as Router, Route, Link } from "react-router-dom"
import './App.css';


const { SubMenu } = Menu;
const { Header, Content, Sider ,Footer} = Layout;

class App extends React.Component{
  render() {
    return <div className="App">
      <Button type="primary">Button</Button>
    </div>;
  }
}


export default App;

yarn start

 

路由参考文档

https://reacttraining.com/react-router/web/guides/quick-start

其他参考antd官方文档 

 https://ant.design/docs/react/introduce-cn

 

疑难问题列表

自定义组件

https://www.runoob.com/react/react-components.html

非表单组件引用

<BaseTableList ref={(tableList) => {this.tableList = tableList}} />

表单组件引用

<BaseTableForm wrappedComponentRef={(form) => {this.editForm = form}}/>

通过这种方式引用的可以使用自定义方法

 

自定义组件包含标签体的 ,通过this.props.children 引用,可以判断标签名称,属性,选择性展示

import React from 'react';

class Custom extends React.Component{


    render() {
        console.info(this);
        return <div>
            <h2>自定义组件</h2>
            {this.props.children[0]}
        </div>;
    }
}

export {Custom};

<Custom>
    <div name="123">222</div>
    <div name="ddd">312312</div>
</Custom>

关于递归,参考

https://blog.csdn.net/weixin_44809405/article/details/88714908

createTree = data => {
    let treeArr = [];
	//获取顶级父元素集合
    let roots = data.filter(elemt => elemt.parentId === 0);
    treeArr.push(...roots);
    //从顶级元素开始，获取每个元素的子元素放到该元素的children属性中
    const getChildren = (resultarr,data) => {
        resultarr.forEach((elemt,index) => {
            elemt.children = data.filter((item,index) => item.parentId === elemt.id);
            //判断当前元素是不是有子元素被添加，如果有，再在子元素这一层循环
            if(elemt.children.length > 0){
                getChildren(elemt.children,data);
            }
        });
    }
    getChildren(treeArr,data);
    //最后更新一下数据
    this.setState({
    	treeArr
    })
}

jsx菜鸟教程 

https://www.runoob.com/react/react-jsx.html

es6教程

https://www.runoob.com/w3cnote/es6-tutorial.html