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

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » P13:React进阶-Component组件的拆分

发表回复