react入门（六）——组合组件

什么是组合组件

 大家都知道我们在做项目的时候不可能只有一个组件或两个组件，是由很多个组件组合使用的，而且每个组件之间或多或少的有些关系，我把这些组件就称作组合组件。
例如我们想要实现以下效果，

分析

• 拆分为静态组件
   我们可以将他拆分为三个组件，分别是App、Add、List，第一个组件是一个包裹内部组件的组件，第二个组件是添加项目的组件、第三个组件是显示列表的组件。

<script type="text/babel">
    class App extends React.Component {
        render() {
            return (
                <div>
                    <h1>simple TODOList</h1>
                    <Add/>
                    <List>
                </div>
            )
        }
    }

    class Add extends React.Component {
        render() {
            return (
                <div>
                    <input type="text"/>
                    <button>add #3</button>
                </div>
            )
        }
    }
    
    class List extends React.Component {
        render() {
            return (
                <ul>
                   <li>吃饭</li>
                   <li>睡觉</li>
                   <li>打豆豆</li>
                </ul>
            )
        }
    }
    ReactDOM.render(<App/>, document.getElementById('test'))
</script>

• 完成动态组件的交互
   首先需要初始化数据，数据放在哪里哪里呢? 这里我教大家一个方法：一个组件用的数据放在自己的组件内部，一些组件用的数据放在他们共同的父级。
   所以，我们需要给App组件初始化数据；因为在Add里面还用到了这个数据的长度，所以我们也要向Add组件传递一个length属性。除此之外我们还需要向List组件传递state里的todos的数据（List组件展示todos）

		constructor() {
            super();
            this.state = {
                todos: ['吃饭', '睡觉', '打豆豆'],
            };
            this.addTodo = this.addTodo.bind(this)
        }
        addTodo(todo) {
            //拿取状态
            let todos = this.state.todos;
            //更新状态
            todos.unshift(todo);
            this.setState({
                todos
            })
        }
       
        render(){
			const {todos}= this.state;
			return (
			...
			<Add length={todos.length} addTodo={this.addTodo}/>
			<List todos={todos}/>
			)
		}

 这里我们还需要向Add组件传递一个方法——addTodo，因为props是只读的，子组件不能通过props进而修改父组件的state，子组件只能调用父组件的方法来修改父组件的state。
 要实现动态组件就要给按钮绑定监听，这里绑定监听使用箭头函数绑定，因为箭头函数没有自己的this，他会找他的父级的this。
 在Add组件里面绑定监听，还需要对input进行一个ref引用

<input type="text" ref={el => this.todoInput = el}/>
<button onClick={this.add}>add #{this.props.length + 1}</button>

• 渲染数据
   在List组件中，我们渲染todos很简单

class List extends React.Component {
        render() {
            let {todos} = this.props;
            return (
                <ul>
                    {todos.map((todo, index) => <li key={index}>{todo}</li>)}
                </ul>
            )
        }
    }

• 响应监听
   之前我们已经对button添加过监听了，这里我们需要实现这个监听。注意：这里我们不能直接修改props，只能通过调用父组件的方法addTodo，来实现父组件的state的更新

		add() {
            let value = this.todoInput.value.trim();
            if (value === '') {
                return;
            }
            this.props.addTodo(value);
            this.todoInput.value = '';
        }

 至此，我们已经完成所有的效果。希望各位也能学懂