零碎知识点：

1.安装 axios
命令：npm install --save axios

2.react 遍历对象数组，取出其中的某几个值重新赋予对象名，并返回新的数组

 axios.get(url)
        .then(response=>{
             //得到响应数据
            const result=response.data
            console.log(result)
           //遍历 items 对象数组，取出其中的三个对象值，赋值给新的属性名，并返回
            const  users= result.items.map(item=>{
                return { name: item.login, url:item.html_url, avatarUrl:item.avatar_url }
            })

             //更新状态（成功）
             this.setState({loading:false,users})
        })

3.当组件接收到新的属性时回调

componentWillReceiveProps（）{}

4.检测到列表无数据时显示 一行提示字

image.png

       const { comments, deleteComment}=this.props
        //计算出是否显示
        const display=comments.length===0?'block':'none'

        return (
            <div className="col-md-8">
                <h3 className="reply">评论回复：</h3>
                <h2 style={{display}}>暂无评论，点击左侧添加评论！！！</h2>
                <ul className="list-group">
                   {
                        comments.map((c, index) => <CommentItem comment={c} key={index} index={index}/>)
                   }   
                </ul>
            </div>
        )

5.点击某个内容，改变样式

activeClassName='activeClass'

举例：
jsx:

<NavLink  activeClassName='activeClass' />
<NavLink  activeClassName='activeClass' />

css:

.activeClass {
  color: white !important;
  background-color: palevioletred !important;
}

效果：

image.png

6：如何复写已有的组件

import React, { Component } from 'react'
import {NavLink} from 'react-router-dom'

export default class MyNavLink extends Component {
    render() {
        //将外部传入所有属性传递给 NavLink
        return <NavLink {...this.props} activeClassName='activeClass' />
       
    }
}

7.对 react 前端项目进行打包

 npm run build
 npm install -g serve
 serve build 

8.如何向事件回调函数传递参数

先定义一个匿名函数，在这个匿名函数中调用处理的函数并传入数据

onClick={() => { this.showSubCategorys(category)}}

9、子组件调用父组件的方法

将父组件的方法以函数属性的形式传递给子组件

10、父组件调用子组件的方法

在父组件中通过 ref 得到子组件标签对象（也就是组件对象），调用其方法