P13:React进阶

现在的美女服务菜单已经完美的制作好了，但是这从头到尾我们只用了一个组件，但是在实际工作中肯定是团队开发，我们会把一个大功能分成不同的组件。比如把文本框和按钮单独一个组件，把下面的服务列表单独一个组件，这涉及了一个组件拆分的能力和知识。本文就把美女服务菜单进行一个拆分。

新建服务菜单组件

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

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

    render() { 
        return ( 
            <li>美女</li>
         );
    }
}
export default MeinvItem;

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

import MeinvItem from './MeinvItem'

###　修改Meinv组件

已经引入了新写的组件，这时候原来的代码要如何修改才能把新组件加入？

把原来的代码注释掉，当然你也可以删除掉，我这里就注释掉了，注释方法如下:

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

</li>
*/ }

然后在最外层加入包裹元素<div>，为的是防止两个以上的标签，产生错误信息。

最后直接写入 MeinvItem 标签就可以了。

<MeinvItem />

为了方便你练习，给出全部代码:

import React,{Component,Fragment } from 'react'
import MeinvItemItem from './MeinvItem'

class Meinv extends Component{
//js 的构造函数，由于其他任何函数执行
constructor(props){
    super(props) //调用父类的构造函数，固定写法
    this.state={
        inputValue:'' , // input 中的值
        list:['基础按摩','精油推背']    //服务列表
    }
}

render(){
    return  (
        <Fragment>
            {/* 正确注释的写法 */}
<div>
    <label htmlFor="mybj">加入服务：</label>
    <input id="mybj" className="input" value={this.state.inputValue} onChange={this.inputChange.bind(this)} />
    <button onClick={this.addList.bind(this)}> 增加服务 </button>
</div>
            <ul>
                {
                    this.state.list.map((item,index)=>{
                        return (
                            //----------------关键修改代码----start
                            <div>
                                <MeinvItem />
                            </div>
                            //----------------关键修改代码----end

                        )
                    })
                }
            </ul>  
        </Fragment>
    )
}

    inputChange(e){
        // console.log(e.target.value);
        // this.state.inputValue=e.target.value;
        this.setState({
            inputValue:e.target.value
        })
    }
    //增加服务的按钮响应方法
    addList(){
        this.setState({
            list:[...this.state.list,this.state.inputValue],
            inputValue:''
        })

    }
   //删除单项服务
   deleteItem(index){
    let list = this.state.list
    list.splice(index,1)
    this.setState({
        list:list
    })
}

}
export default Meinv

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