react2:React中组件的拆分和代码的优化

使用组件的拆分来实现todolist。

1. 在src下创建一个js文件，名称是ToDoItem.js（子组件）。

2. 在使用这个子组件的父组件中引入ToDoItem。本文中的父组件是App.js。

import TodoItem from './TodoItem';

父组件向子组件传值

3. 在父组件中使用子组件标签。
   父组件通过属性的形式向子组件传递参数。例如：content={item} ，把item值传递到子组件中，以content参数的形式放在TodoItem中，content不一定非要叫这个名字，随意，只是父子组件中的属性名相同就行。如果不加content，ToDoItem中的值不可以变化。

<ul>
   {
   
           this.state.list.map((item,index) =>{
   
                   return (
                       <TodoItem key={
   index} content={
   item} />
                   )
               }
           )
       }
</ul>

4. 子组件通过this.props来接收父组件传递过来的参数。ToDoItem要接收传递过来的content内容，通过this.props.content来接收，通过属性接收到父组件传递过来的内容。

import React from 'react';
class TodoItem extends React.Component {
   
    render () {
   
        return (
            <div>{
   this.props.content}</div>
        )
    }
}
export default TodoItem;

删除功能还不能用。

子组件向父组件传值

5. 子组件如果想和父组件通信，子组件要调用父组件传递过来的方法

//在父组件中向子组件传递一个方法，
//deleteClick ={this.deleteClick.bind(this)}
 this.state.list.map((item,index) =>{
   
    return (
           <TodoItem key={
   index} content={
   item} index={
   index} deleteClick ={
   this.deleteClick.bind(this)}/>
    )
})
 //在子组件中调用