组件组合使用

React实现图片中效果

组件化编写功能的流程：

• 1.拆分组件
• 2.实现静态组件（只有静态界面，没有动态数据和交互）
• 3.实现动态组件
• 实现初始化数据动态显示
• 实现交互功能

数据保存在哪个组件内？

• 看数据是某个组件需要（给它），还是某些组件需要（给共同的父亲）

需要在子组件中改变父组件的状态？

• 子组件中不能直接改变父组件的状态
• 状态在哪个组件，更新状态的行为就应该定义在哪个组件
• 解决：父组件定义函数，传递给子组件，子组件调用

class App extends React.Component{
    constructor(props) {
        super(props);
        this.state={
            lists:["吃饭","睡觉","打豆豆"]
        }
        this.addList = this.addList.bind(this)
    }
    addList(list){
        // 读取lists数据
        const lists = this.state.lists;
        // 添加list数据
        lists.unshift(list)
        // 更新state状态
        this.setState({lists})
    }

    render() {
        const {lists} = this.state;
        return (
            <div>
                <h1> Simple Todo List</h1>
                <Add count ={lists.length} addList={this.addList}/>
                <List list={lists}/>
            </div>
        )
    }
}

class Add extends React.Component{
    constructor(props){
        super(props)

        this.add = this.add.bind(this)
    }

    add(){
        // 获取到input上的数据
        const list = this.inputValue.value.trim()
        // 检查合法性
        if(!list){
            return
        }
        // 添加
        this.props.addList(list)
        // 添加完成后清空
        this.inputValue.value = "";
    }

    render() {
        return(
            <div>
                <input type="text" ref={input=> this.inputValue=input}/>
                <button onClick={this.add}>add #{this.props.count+1}</button>
            </div>
        )
    }
}

class List extends React.Component{
    render() {
        return(
            <div>
                <ul>
                    {this.props.list.map((value,index)=>( <li>{value}</li>))}
                </ul>
            </div>
        )
    }
}
/*List.propTypes = {
    list:PropTypes.array.isRequired
}*/

export default App;