React开始

一起来学React吧（2018.7.5——3）

    本人已经入职，公司前端使用React，作为一名小白还是要从头学起。

---

一个React参数传递和状态提升的例子

今天看了React学习手册，比较有收获就写了这个例子。
Star.js文件（本来应该是五角星，为了简便就弄了个正方形）：

import React, {Component} from 'react';

class Star extends Component{
    constructor(props){
        super(props);
        this.changDiv = this.changDiv.bind(this);
    }

    changDiv(){
        this.props.changeStar(this.props.iid);
    }

    render(){
        const {...starItem} = this.props;
        // console.log(starItem.iid);
        return(
            <div style={{width:'20px',height:'20px',backgroundColor:starItem.color,margin:'5px',float:'left'}} onClick={this.changDiv}>

            </div>
        );
    }
}

export default Star;

StarTop.js文件：

import React, {Component} from 'react';
import Star from './Star';

class StarTop extends Component{
    constructor(props){
        super(props);
        this.state = {
            number: this.props.number,
            color: 'red'
        };
        this.changeStarGo = this.changeStarGo.bind(this);
    }

    changeStarGo(numbr){
        // this.props.onclickk(numbr);
        this.setState({number:numbr});
    }

    render(){
        let ht = [];
        for(let i = 1;i <= this.state.number;i++){
            ht.push(<Star changeStar={this.changeStarGo} iid={i} key={i} style={{width:'200px',height:'200px',margin:'30px'}} color={this.state.color}></Star>);
        }
        for(let j = this.state.number+1;j <= 5;j++){
            ht.push(<Star changeStar={this.changeStarGo} iid={j} key={j} style={{width:'200px',height:'200px',margin:'30px'}} color='black'></Star>);
        }

        return(
            <div>
               {ht.map((item) => item)}
            </div>
        );
    }
}

export default StarTop;

StarTopTop.js文件：

import React, {Component} from 'react';
import StarTop from './StarTop';

class StarTopTop extends Component{
    constructor(props){
        super(props);
        this.state = {
            number: 3
        };
    }
    render(){
        return(
            <StarTop number={this.state.number}>

            </StarTop>
        );
    }
}

export default StarTopTop;

我本来的想法是，StarTopTop存放用户选中的星星数，从Star提升到StarTopTop，但是修改StarTopTop里的number参数，不会重新渲染页面。所以就写到了StarTop里面。至于原因暂时还不清楚，可能和React的机制有关，刚入门还得好好学。