本节将介绍拆分简单组件的知识。
实际开发中。一个大功能可能会分成不同的组件,比如把文本框和按钮单独一个组件,下面的list列表单独一个组件。这涉及到了一部分组件拆分的知识。
1. 新建子组件
在src
目录下,新建一个文件叫ChildItem.js
,然后写好基础结构。
import React, { Component } from 'react'
class ChildItem extends Component {
render() {
return (
<li>项目1</li>
)
}
}
export default ChildItem
写好之后,返回之前的Child.js
组件。在头部用import
引入新建的子组件ChildItem.js
。如下:
import ChildItem from './ChildItem'
此时新组件已引入,可以在原来的ul
代码处修改一下,将新引入的组件放在此处:
Child.js文件
// 省略头部代码
render() {
// 省略上面代码
<ul>
{
this.state.list.map((item, index) => {
return (
// 此处为原代码,将新引入的 ChildItem.js组件放置此处。
// <li
// key = {index + item}
// onClick = {() => this.delItem(index)}
// dangerouslySetInnerHTML = {{__html: item}}>
// </li>
// 以下为新组件
<ChildItem></ChildItem>
)
})
}
</ul>
}
// 省略底部代码
这样就结束了。为了防止新手出错。下面放出Child.js
组件全部代码
import React, { Component, Fragment } from 'react'
// 引入css
import './style.css'
// 引入子组件
import ChildItem from './ChildItem'
// 面向对象React
class Child extends Component {
// 固定写法。props是Child从Component里面继承来的。
constructor (props) {
// 调用父级别方法
super(props)
// 初始化数据
this.state = {
inputValue: 'text',
list: ['文字11', '文字22']
}
}
// 绑定事件
inputChange = (e) => {
this.setState({
inputValue: e.target.value
})
}
addItem = (e, a, b) => {
this.setState({
list: [...this.state.list, this.state.inputValue],
inputValue: ''
})
}
delItem = (index) => {
let list = this.state.list
list.splice(index, 1)
this.setState({
list: list
})
}
render() {
return (
<Fragment>
<div>
两种写法
{/* <input value = {this.state.inputValue} onChange = {this.inputChange.bind(e)} /> */}
<input className = 'input' value = {this.state.inputValue} onChange = {this.inputChange} />
<button onClick = {this.addItem}>添加</button>
</div>
<p>{this.state.inputValue}</p>
<ul>
{
this.state.list.map((item, index) => {
return (
// <li
// key = {index + item}
// onClick = {() => this.delItem(index)}
// dangerouslySetInnerHTML = {{__html: item}}>
// </li>
<ChildItem></ChildItem>
)
})
}
</ul>
</Fragment>
)
}
// es6的class语法中,这样定义的方法是挂载在class的原型对象上的。通过一层render,就相当于把原型对象上的方法提取出来单独调用了。且class是严格模式。所以指向undefined
// 此处写方法
inputChange(e) {
// e 为默认传递参数, 事件对象
// target是获取当前元素,此处指的就是input
this.setState({
inputValue: e.target.value
})
}
}
export default Child