1.新建组件
在src目录下新建一个文件SmailSmailGirl.js文件,然后建立一个基本的HTML结构。
import React,{Component} from 'react'
class SmailSmailGirl extends Component{
render(){
return (
<div>
<div><input /> <button> 增加服务 </button></div>
<ul>
<li>头部按摩</li>
<li>精油推背</li>
</ul>
</div>
)
}
}
export default SmailSmailGirl
然后在src下创建index.js文件,在入口中引入SmailSmailGirl组件。
import React from "react";
import ReactDOM from 'react-dom';
import SmailSmailGirl from "./SmailSmailGirl";
//JSX js+xml 虚拟dom
ReactDOM.render(<SmailSmailGirl/>, document.getElementById("root"));
2.组件外层包裹原则
在SmailSmailGirl.js文件中,我们可以看到以上代码中最外层存在
,如果将其去掉就会报错,和Vue一样,最外层必须有一层包裹。
3.Fragment标签讲解
假若你的组件布局偏偏不要最外层的标签,那我们可以使用
首先我们先引用
import React,{Component,Fragment } from 'react'
然后把最外层的div换成Fragment,如下:
import React,{Component,Fragment } from 'react'
class SmailSmailGirl extends Component{
render(){
return (
<Fragment>
<div><input /> <button> 增加服务 </button></div>
<ul>
<li>头部按摩</li>
<li>精油推背</li>
</ul>
</Fragment>
)
}
}
export default SmailSmailGirl
本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!