P13:React进阶-Component组件的拆分

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

新建服务菜单组件

在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 组件之间的传值（父组件向子组件传递数据）。

以上关于P13:React进阶-Component组件的拆分的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。