1. 拆分组件

将大型页面组件拆分为小组件可以使逻辑更加简洁。在之前的代码中，我们可以看到整个页面是一个TodoList，现在我们来拆分这个组件。

我们希望将输入部分和列表部分拆分为两个组件

1.1 TodoItem组件

这个组件应该负责具体的列表项。下面是基本的结构：

这样写会报错，因为return语句的最外层需要一个容器。此时，我们实际上返回了两个容器：一个是自定义组件，一个是注释。

现在只会显示列表项的文本内容，因为之前的列表组件还没有定义好。

当我们使用React组件化思维编写代码时，最顶层会有一个组件--TodoList，然后下面有一个或多个Item组件，甚至可以进行进一步的拆分。

为了解决上述问题，父组件需要将数据传递给子组件，这时需要使用属性来传递数值！

通过上述代码，我们将item传递给了子组件，那么子组件应该如何使用呢？这时需要利用props属性来获取传递的属性content：

这时候就可以完成原先的功能了。

现在我们做一个功能：当点击列表项时，可以删除对应内容。这时需要在TodoItem组件中绑定点击事件：

要想删除Item，实际上需要从数组中删除数据。因此，我们需要改变父组件List数组的内容。但是，直接修改是不允许的，需要借用一些方法。你还记得之前父组件的删除方法吗？

实际上，子组件也希望这样做：

首先，需要一个子组件本身的index值，因此需要让父组件再传递一个值，{}是JSX语法，用于绑定对应的属性：

现在还缺一步，需要绑定handle方法，修改this指向。我们不建议直接将bind方法放在JSX标签中，应该这样写：

这样可以节约性能！

现在我们已经获取了下标，接下来希望调用父组件的handleDeleteItem方法来改变父组件的数据，可以直接将其传递给子组件：

然后，子组件可以调用这个方法：

这样写会报错：

实际上，deleteItem指代handleDeleteItem方法。但是，直接替换之后，子组件找不到这个方法，因此报错了。怎样才能找到这个方法呢？需要将this指向父组件，这时需要在父组件中使用bind来进行绑定了：

父组件通过子组件属性来传递属性或者方法，子组件通过this.props.xxx来调用，如果是方法记得方法传递时候需要进行bind来修改this指向。