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组件的拆分
码云笔记 » P13:React进阶-Component组件的拆分