什么是组合组件
大家都知道我们在做项目的时候不可能只有一个组件或两个组件,是由很多个组件组合使用的,而且每个组件之间或多或少的有些关系,我把这些组件就称作组合组件。
例如我们想要实现以下效果,
分析
- 拆分为静态组件
我们可以将他拆分为三个组件,分别是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 = '';
}
至此,我们已经完成所有的效果。希望各位也能学懂