react从0搭建项目

一、引入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">&#xe679;</i>

image.png
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>
    }
}