练习

因为我在安装了一次脚手架的基础上又安装了一次脚手架，然后再创建react项目就开始有问题了。。。。
看完技术胖的视频 准备自己重新写一遍，因为这个安装的问题，几个小时没了。。。。
备份一下：

总结一下步骤就是index.js文件中是挂载
被引入index.js文件中的Xiaojiejie.js文件是组件，组件中绑定事件并指向当前上下文，并定义对应方法。
父组件向子组件传值是通过props传值，子组件向父组件传值是通过传递父组件的方法，然后子组件绑定事件的对应方法调用父组件方法。

src下
index.js

import React from 'react'
import ReactDOM from 'react-dom'
import Xiaojiejie from './Xiaojiejie'

ReactDOM.render( <Xiaojiejie />,document.getElementById('root'))

Xiaojiejie.js

import React,{Component,Fragment} from 'react'
import './index.css'
import XiaojiejieItem from './XiaojiejieItem'
import Boss from './Boss'
import axios from 'axios'
import {CSSTransition, TransitionGroup} from 'react-transition-group'

class Xiaojiejie extends Component{
    constructor(props){
        super(props)
        this.state={
            inputValue:'hh',
            list:['按摩','锤肩']
        }
    }

    componentDidMount(){
        axios.defaults.withCredentials = true
        axios.get('http://rap2api.taobao.org/app/mock/280858/example/1617624035824')
        .then((res)=>{
            console.log("获取数据成功"+JSON.stringify(res))
        })
        .catch((error)=>{
            console.log("获取数据失败"+error.error)
        })
    }

    render(){
        
        return(
            <Fragment>
                <div>
                    <label htmlFor='add'>增加服务</label>
                    <input 
                    id='add' 
                    className='input' 
                    value={this.state.inputValue}  
                    onChange={this.inputChange.bind(this)}
                    ref={(input)=>{this.input=input}}
                    />
                    <button onClick={this.addList.bind(this)}>增加服务</button>
                </div>
                <ul >
                    <TransitionGroup>
                    {
                        this.state.list.map((item,index)=>{
                            return (
                                    <CSSTransition
                                    unmountOnExit
                                    appear={true}
                                    timeout={1000}
                                    key={item+index}
                                    classNames='boss-text'
                                    >
                                        <XiaojiejieItem 
                                        content={item}
                                         
                                        index={index}
                                        list={this.state.list}
                                        deleteItem={this.deleteItem.bind(this)}
                                    ></XiaojiejieItem>  
                                    </CSSTransition>
                                
                                
                                /* {
                                    <li onClick={this.deleteItem.bind(this,index)}
                                    key={index+item}
                                    dangerouslySetInnerHTML={{__html:item}}
                                    >
                                    </li>
                                    }
                                */
                            )
                        })
                    }
                    </TransitionGroup>
                </ul>
                <Boss></Boss>
            </Fragment>
        )
    }
    inputChange(e){
        this.setState({
            inputValue:e.target.value
        })
    }
    addList(){
        this.setState({
            list:[...this.state.list,this.state.inputValue],
            inputValue:''
        })
        
    }
    deleteItem(index){
        let list=this.state.list
        list.splice(index,1)
        this.setState({
            list:list
        })
    }
}

export default Xiaojiejie

XiaojiejieItem.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class XiaojiejieItem extends Component {
    constructor(props){
        super(props)
        this.handleClick=this.handleClick.bind(this)
    }
    shouldComponentUpdate(nextProps,nextState){
        if(nextProps!==this.props.content)
            return true
        else 
            return false
    }
    render(){
        console.log("render-----子组件正在挂载")
        return ( 
            <div onClick={this.handleClick}>{this.props.name}+{this.props.content}</div>
         );
    }
    handleClick(){
       this.props.deleteItem(this.props.index); 
    }
}

XiaojiejieItem.propTypes={
    content:PropTypes.string,
    deleteItem:PropTypes.func,
    index:PropTypes.number,
    name:PropTypes.string.isRequired
}
XiaojiejieItem.defaultProps={
    name:'waa'
}


export default XiaojiejieItem;

App.js

import React,{Component} from 'react'

class App extends Component{
    render(){
        return(
            <ul className='name'>
                <li>{false?'Hello world!':'hh'}</li>
                <li>hello beijing</li>
            </ul>
        )  
    }
}

export default App

Boss.js

import React, { Component } from 'react';
import {CSSTransition } from 'react-transition-group'

class Boss extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            isShow:true
        }
        this.toToggole=this.toToggole.bind(this);
    }
    render() { 
        return ( 
            <div>
                <CSSTransition
                in={this.state.isShow}
                timeout={2000}
                classNames="boss-text"
                unmountOnExit
                >
                    <div>BOSS级人物-孙悟空</div>
                </CSSTransition>
                <div><button onClick={this.toToggole}>召唤Boss</button></div>
            </div>
         );
    }
    toToggole(){
        this.setState({
            isShow:this.state.isShow ? false : true
        })
    }
}
 
export default Boss;

index.css

.boss-text-enter{
    opacity:0;
    color:red;
}
.boss-text-enter-active{
    opacity: 1;
    transition: opacity 2000ms;
}