【练习案例React三】如何创建一个新的组件引入

目录

前言

导语

代码

 引入

运行结果

​

---

前言

我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷

导语

今天得话继续上次开源项目案例得一个编写 然后这边接着编写 目前想在这个基础上再添加一个新的组件 然后就新建了一个文件夹 里面多定义了一个新组件 文件目录common/buttonGroup用于后期使用

 

代码

子组件

//按钮制作
import React, { Component } from 'react';


class ButtonGroup extends Component {
  state={

  }
  render(){
      return <div>1111</div>
  }
}


export default ButtonGroup;

 引入

import './App.css';
import React from 'react';
//引入按钮组件 后期主要用于按钮组件开发
import  ButtonGroup from './Common/ButtonGroup/index.js';
//引入弹性布局组件 后期用于测试弹性布局
import  Flex from './Common/Flex/index.js';

class App extends React.Component{
    state={
        geyao:1,
    }
    componentDidMount=()=>{
        console.log(this,"thisProps")
    }
    render(){
       
        return (<div>
            <ButtonGroup></ButtonGroup>
            <Flex></Flex>
        </div>)
    }
}

export default App;

运行结果