一、引入iconfont阿里巴巴图库

官网https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2
1.进入官网
2.把需要的图标加入购物车
3.把购物车里的图标加入项目
4.点击下载至本地，解压
5.在项目的public文件夹下新建一个iconfont文件夹
6.把如图所示的几个文件，放入iconfont文件夹内
7.在public/index.html里引入/iconfont/iconfont.css<link rel="stylesheet" href="./iconfont/iconfont.css">
8.在组件内使用<i className="iconfont"></i>

image.png

二、路由传参

params
优势：刷新地址栏，参数依然存在
缺点:只能传字符串，并且，如果传的值太多的话，url会变得长而丑陋。

<Route path='/path/:name' component={Path}/>
<link to="/path/2">xxx</Link>
this.props.history.push({pathname:"/path/" + name});
读取参数用:this.props.match.params.name

query
优势：传参优雅，传递参数可传对象；
缺点：刷新地址栏，参数丢失

<Route path='/query' component={Query}/>
<Link to={{ path : ' /query' , query : { name : 'sunny' }}}>
this.props.history.push({pathname:"/query",query: { name : 'sunny' }});
读取参数用: this.props.location.query.name

state
优缺点同query

<Route path='/sort ' component={Sort}/>
<Link to={{ path : ' /sort ' , state : { name : 'sunny' }}}> 
this.props.history.push({pathname:"/sort ",state : { name : 'sunny' }});
读取参数用: this.props.location.query.state

search
优缺点同params

<Route path='/web/departManange ' component={DepartManange}/>
<link to="web/departManange?tenantId=12121212">xxx</Link>
this.props.history.push({pathname:"/web/departManange?tenantId" + row.tenantId});
读取参数用: this.props.location.search

三、ref的3种方法

方式1: string类型绑定
类似于vue中的ref绑定方式，可以通过this.refs.绑定的ref的名字获取到节点dom
注意的是这种方式已经不被最新版的react推荐使用，有可能会在未来版本中遗弃

image.png
方式2: react.CreateRef()
通过在class中使用React.createRef()方法创建一些变量，可以将这些变量绑定到标签的ref中
那么该变量的current则指向绑定的标签dom

image.png
方式3: 函数形式
在class中声明函数，在函数中绑定ref
使用这种方法可以将子组件暴露给父组件以使得父组件能够调用子组件的方法

image

通过函数的方法绑定ref可以将整个子组件暴露给父组件

image

image

注意: react并不推荐过度使用ref，如果能通过state做到的事情，就不应该使用 refs 在你的 app 中“让事情发生”。
过度使用ref并不符合数据驱动的思想

摘自：https://www.cnblogs.com/lanpang9661/p/12604712.html

四、将npm run build后，点击build文件夹内的index.html文件直接查看页面

1.在package.json里，"private":true后加"homepage": "./"

image.png
2.如果用的是BrowserRouter：history路由则还会报错，这时候要把BrowserRouter换成HashRouter：哈希路由

image.png

五、react实现vue插槽

子组件

import React, { Component } from 'react';

class Zi extends Component {
    constructor(props) {
        super(props);
        this.state = {}
    }
    render () {
        const { children } = this.props
        return <div>
            {Array.isArray(children) ?
                children.map(child => child) :
                children && children
            }
            <p>渲染子组件自带的元素</p>
        </div>
    }
}

父组件

import React, { Component } from 'react';
import Zi from './zi.js'

class Fu extends Component {
    constructor(props) {
        super(props);
        this.state = {}
    }
    render () {
        return <div>
            <Zi>
                <p>渲染父的元素1</p>
                <p>渲染父的元素2</p>
            </Zi>
        </div>
    }
}