新建组件
现在SRC的目录下面,新建一个文件Xiaojiejie.js文件,然后写一个基本的HTML结构。代码如下:
import React,{Component} from 'react'
class Xiaojiejie extends Component{
render(){
return (
<div>
<div><input /> <button> 增加服务 </button></div>
<ul>
<li>头部按摩</li>
<li>精油推背</li>
</ul>
</div>
)
}
}
export default Xiaojiejie
这个文件现在还没有什么功能,只是写完了一个小组件。然后我们把入口文件的组件换成Xiajiejie组件。
组件外层包裹原则
这是一个很重要的原则,比如上面的代码,我们去掉最外层的< div >,就回报错,因为React要求必须在一个组件的最外层进行包裹。
Fragment标签
加上最外层的DIV,组件就是完全正常的,但是你的布局就偏不需要这个最外层的标签怎么办?比如我们在作Flex布局的时候,外层还真的不能有包裹元素。这种矛盾其实React16已经有所考虑了,为我们准备了< Fragment >标签。
要想使用< Fragment >,需要先进行引入。
import React,{Component,Fragment } from 'react'
然后把最外层的
标签,换成< Fragment >标签,代码如下。
import React,{Component,Fragment } from 'react'
class Xiaojiejie extends Component{
render(){
return (
<Fragment>
<div><input /> <button> 增加服务 </button></div>
<ul>
<li>头部按摩</li>
<li>精油推背</li>
</ul>
</Fragment>
)
}
}
export default Xiaojiejie