从零开始学习React——(五)：编写一个小组件基础框架

本节将写一个TodoList组件的基础框架。CSS部分将忽略。

1. 新建TodoList组件

在src目录下，新建一个文件Child.js文件，然后写一个基础的HTML结构。代码如下：

	import React, { Component } from 'react'
	class Child extends Component {
		render() {
			return (
				<div>
					<div>
						<input />
						<button>新增</botton>
					</div>
					<ul>
						<li>我是项目1</li>
						<li>我是项目2</li>
					</ul>
				</div>
			)
		}
	}
	export default Child

当然，上述只是写了一个TodoList的基本框架。然后把入口文件index.js里面的<App />组件替换成<Child />组件。替换为<Child />组件之前别忘了在 index.js头部引入<Child />组件。此时index.js里的代码应该如下：

	import React from 'react'
	import ReactDOM from 'react-dom'
	// 默认的App组件，此时可以删除或者注释。当然，留在里面也无所谓, App后面的.js可以省略掉不写
	import App from './App'
	// 引入自定义组件Child.js
	import Child from './Child'

	// 渲染
	ReactDOM.render(<Child />, document.getElementById('root'))

2. 组件包裹原则

上述Child.js组件中，有一个很重要的地方就是组外层的<div></div>，如果去掉它，代码就会报错。因为React要求必须在一个组件的最外层进行包裹。以下为报错代码:

import React, { Component } from 'react'
	class Child extends Component {
		render() {
			return (
				<div>
					<input />
					<button>新增</botton>
				</div>
				<ul>
					<li>我是项目1</li>
					<li>我是项目2</li>
				</ul>
			)
		}
	}
	export default Child

上述代码会报错，原因是少了最外层的包裹。所以组件最外层都需要一个包裹。

Fragment标签

有时候写组件的时候有一些特殊情况。最外层的标签并不想用<div></div>包裹。那么就可以使用<Fragment></Fragment>标签。并且它实际并不会渲染到页面DOM结构中。
使用<Fragment></Fragment>之前必须先引入。然后将最外层的<div></div>替换成<Fragment></Fragment>。最终代码如下：

	import React, { Component, Fragment } from 'react'
	class Child extends Component {
		render() {
			return (
				<Fragment>
					<div>
						<input />
						<button>新增</botton>
					</div>
					<ul>
						<li>我是项目1</li>
						<li>我是项目2</li>
					</ul>
				</Fragment>
			)
		}
	}
	export default Child

这个时候再回到浏览器就会发现报错没有了。打开谷歌的Element标签，就会发现没有外层的包裹了。