从零开始学习React——(十)：React 组件的拆分

本节将介绍拆分简单组件的知识。

实际开发中。一个大功能可能会分成不同的组件，比如把文本框和按钮单独一个组件，下面的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