1:在src中新建了三个子组件分别为Header Content Footer
2:在里面分别写入代码 建议用rcc快捷方式
Header.js中
import React, { Component } from 'react'
var HeaderStyle = {
color:"red"
}
export default class Header extends Component {
render() {
return (
<div style={HeaderStyle}>
我是头部
</div>
)
}
}
Content.js中
import React, { Component } from 'react'
export default class Content extends Component {
render() {
return (
<div>
我是内容
</div>
)
}
}
在Footer.js中写入
import React, { Component } from 'react'
import "./Footer.css";
export default class Footer extends Component {
render() {
return (
<div className="footer">
我是底部
</div>
)
}
}
3:在同级写一个css Footer.css
.footer{
color:green
}
4:在index中使用我们的三个子组件
import React,{Component} from "react";
import ReactDom from "react-dom";
import Header from "./Header";
import Content from "./Content";
import Footer from "./Footer";
class App extends Component{
render(){
return (
<div>
<Header></Header>
<Content></Content>
<Footer></Footer>
</div>
)
}
}
ReactDom.render(<App content="React"></App>,document.getElementById("root"))
5:style注意事项
6:css的注意事项
写完运行 就可以看到头部是红色字体 底部是绿色字体