create-react-app 教程2 创建一个自定义的组件

拿我格子衫来

发布于 2022-01-24 16:26:59

7190

文章被收录于专栏：TopFETopFE

紧接上文

如果我们要创建一个自定义的组件来使用可以这样做

在src下创建components/Button

在Button目录下创建 Button.css 和Button.js

Button.js内容

import React ,{Component} from 'react'
import './Button.css'

class Button extends Component {
  render() {
    return <div className="Button">按钮组件</div>
  }
}

export default Button

Button.css内容

.Button{
  padding: 20px;
  background-color: blue;
  color: #ffffff;
}

在App.js中使用

// 引入组件
import Button from './components/Button/Button'


// 使用组件
<Button/>

打开localhost:3000 查看效果

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

javascript

css

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

javascript

css

登录后参与评论

0 条评论

热度

create-react-app 教程2 创建一个自定义的组件

create-react-app 教程2 创建一个自定义的组件

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐