React实例1-新建组件

痛定思痛。 2022-12-12 15:30 141阅读 0赞

#### 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标签讲解 ####

假若你的组件布局偏偏不要最外层的标签，那我们可以使用标签，React16已经有所考虑。

首先我们先引用，需要先进行引入。

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

个人博客：[Karma‘s Blog][Karma_s Blog]  
源码地址：[传送门][Link 1]

[Karma_s Blog]: http://karma520.com/2020/10/08/23%20React%E5%AE%9E%E4%BE%8B1-%E6%96%B0%E5%BB%BA%E7%BB%84%E4%BB%B6/
[Link 1]: https://github.com/kay-520/React_study