#私藏項目實操分享#【練習案例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;      

運作結果

​