react 组件组合使用

1，todo-list 组件怎样组合使用

class App1 extends React.Component{
    // 初始化数据
    constructor(props){
        super(props)
        // 初始化状态
        this.state={
            todos:['eat','sweep','dddm']
        }
        this.addTodo=this.addTodo.bind(this)
    }
    addTodo(todo){
        const {todos}=this.state
        todos.unshift(todo)
        // 更新状态
        this.setState({todos})
    }
    render(){
        const {todos}=this.state
        return(
            <div>
                <h2>smiple todo list</h2>
                <Add count={todos.length} addTodo={this.addTodo}/>
                <List todos={todos}/>
            </div>
        )
    }
}    

class Add extends React.Component{
    constructor(props){
        super(props)
        this.add=this.add.bind(this) //只要是自己定义的都要加上bind
    }
    add(){
        const todo=this.todoInput.value.trim();
        if(!todo){
            return
        }
        this.props.addTodo(todo);
        this.todoInput.value=''
    }
    render(){
        return(
            <div>
                <input type='text' ref={input => this.todoInput=input}/>
                <button onClick={this.add}>add #{this.props.count}</button>
            </div>
        )
    }
}

class List extends React.Component{
    render(){
        const {todos}=this.props
        return(
            <ul>
                {
                    todos.map((todo,index)=> {return <li key={index}>{todo}</li>} )
                    }
            </ul>
        )
    }
}
// list接收属性
List.propTypes={
    todos:PropTypes.array.isRequired
}
Add.propTypes={
    count:PropTypes.number.isRequired,
    addTodo:PropTypes.func.isRequired
}















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