react 组件的创建以及引入方式


一、新建一个文件夹(user),一个组件就是一个文件夹

  文件夹下建立 index.js (写组件内容) 、style.less(写组件样式)、 img(文件夹,需要的话放入图片)

目录层级:

  user

    -- index.js(组件内容:组件名首字母大写)

    -- style.less(组件样式)

    -- images(图片文件夹)

      -- 图片文件

二:在 index.js  文件夹下 ,写组件

//首先第一行,新建组件用,引入react组件
import React, { Component } from 'react';

//第二行,引入less 样式
import XX from './XX.less';

//第三行开始创建组件 
class 组件名 extends Component{
    render(){
        return(
            代码(代码样式引入( className = {xx.header} ))header是类名
                )
          }
}

//组件创建完后:
export default 组件名称 
                   

三、父组件引该子组件

父组件的 index.js 下,

import 该子组件名 from './文件夹名';
./表示当前文件夹

<子组件名/> 调用

  

 

 

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM