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

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P13:React进阶-Component组件的拆分

发表评论

前端开发相关广告投放 更专业 更精准

立即查看 联系我们