在编写组件标题标题中的内容主要是介绍如何定义组件和使用组件的一个过程,还有就是介绍一下组件化开发的过程,和类组件与函数组件的相互结合的使用
新建 index.js 或者修改 create-react-app 创建好的模板当中的这个文件有就修改没有就新增内容如下:
import ReactDom from 'react-dom';
import React from "react";
import App from './App';
ReactDom.render(<App/>, document.getElementById('root'));
紧接着 App.js 同理如上:
import React from 'react';
import './App.css';
class App extends React.Component {
render() {
return (
<div>
<div className={'header'}>头部</div>
<div className={'main'}>中间</div>
<div className={'footer'}>底部</div>
</div>
)
}
}
export default App;
App.css:
.header {
background: red;
}
.main {
background: green;
}
.footer {
background: blue;
}
运行效果如下:
如上定义的是一个类组件,如果这个时候我们想将当中的中部头部底部个个部分的内容都抽离成为一个小的组件那么该如何进行编写呢,那么就来看看这一块的用法吧,关于头部中部底部的组件博主使用的是函数组件来进行定义,这样就可以顺便的看到类组件与函数组件的结合使用的情况:
Header.js:
import React from 'react';
import './Header.css'
function Header() {
return (
<div className={'header'}>我是头部</div>
)
}
export default Header;
Header.css:
.header {
background: red;
}
Main.js:
import React from 'react';
import './Main.css'
function Main() {
return (
<div className={'main'}>我是中间</div>
)
}
export default Main;
Main.css:
.main {
background: green;
}
Footer.js:
import React from 'react';
import './Footer.css'
function Footer() {
return (
<div className={'footer'}>我是底部</div>
)
}
export default Footer;
Footer.css:
.footer {
background: blue;
}
然后就是 App.js 类组件当中进行使用的代码了:
import React from 'react';
import './App.css';
import Footer from "./components/Footer";
import Main from "./components/Main";
import Header from "./components/Header";
class App extends React.Component {
render() {
return (
<div>
<Header/>
<Main/>
<Footer/>
</div>
)
}
}
export default App;
使用的方式其实和博主之前文章当中介绍的使用是一样的,这里使用这样的方式定义和使用主要是说明一点,React 是支持类组件与函数式组件的混用的,好啦,本文到此结束。
本期结束咱们下次再见👋~
🌊 关注我不迷路,如果本篇文章对你有所帮助,或者你有什么疑问,欢迎在评论区留言,我一般看到都会回复的。大家点赞支持一下哟~ 💗
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。