react学习之旅五：Component组件拆分、传值

使用之前的小姐姐菜单样例

在真正的开发中，会将一个复杂的页面拆分为很多个组件，使组件更加简单、便于维护，同时更加具有复用性。

这里将小姐姐组件简单地拆分为两个部分，第一部分仍然是Xiaojiejie组件（父组件），第二部分新建为XiaojiejieItem组件（子组件）：

一、拆分组件

新建XiaojiejieItem.js，内容如下：

import React, { Component } from 'react';

class XiaojiejieItem extends Component {

    render() { 
        return ( 
            <li>小姐姐</li>
         );
    }
}
 
export default XiaojiejieItem;

在Xiaojiejie.js中引入XiaojiejieItem.js，并将li部分内容替换为XiaojiejieItem组件：

import XiaojiejieItem from './XiaojiejieItem';

<ul>
{
    this.state.list.map((item,index)=>{
        return (
            <div>
                <XiaojiejieItem/>
            </div>
        )
    })
}
</ul>

此时父子组件还没有建立起值的传递，运行项目会发现无论新增的是什么服务，列表中增加的都会是“小姐姐”，并且点击列表中的服务无法进行删除：

二、父子组件传值

• 父组件可以向子组件传递值，子组件不允许向父组件传值，子组件采用this.props接收父组件传递的值；
• 父组件的方法和数据都以属性方式传递给子组件

修改Xiaojiejie.js，向子组件传递值：

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

修改XaiojiejieItem.js，接收父组件传递过来的值：

import React, { Component } from 'react';

class XiaojiejieItem extends Component {
    constructor(props){
        super(props);
        this.handleClick = this.handleClick.bind(this);//在构造函数中绑定对后期的性能优化会起到非常大的作用
    }

    render() { 
        return ( 
            <li 
                onClick={this.handleClick}
            >
                {this.props.content}
            </li>
         );
    }

    handleClick(){
        this.props.deleteItem(this.props.index);
    }
}
 
export default XiaojiejieItem;

运行项目：