React 组件的拆分

新建组件

在src目录下，新建一个文件，这里就叫做XiaojiejieItem.js，然后先把最基础的结构写好（这里最好练习一下上节课学习的快捷键）。

import React, { Component } from 'react'; //imrc
class XiaojiejieItem  extends Component { //cc

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

写好这些代码后，就可以到以前写的Xiaojiejie.js文件中用import进行引入，代码如下:

import XiaojiejieItem from "./xiaojiejieItem"

修改Xiaojiejie组件

已经引入了新写的组件，这时候原来的代码要如何修改才能把新组件加入？
把原来的代码注释掉，当然你也可以删除掉，我这里就注释掉了,注释方法如下:

// <li key={index+item} onClick={this.deletItem.bind(this,index)}
//     dangerouslySetInnerHTML={{__html:item}}
// >
                  
// </li>

最后直接写入Xiaojiejie标签就可以了.

<XiaojiejieItem />

这时候可以预览一下效果，虽然现在已经把组件进行了拆分，但是还全是显示的小姐姐，还没有实现传值，下节课我们主要实现一下React组件之间的传值（父组件向子组件传递数据）。

技术胖第一博客网站：https://jspang.com/detailed?id=46#toc220