React入门第五步：组件布局小案例

时间：2023-03-14 09:46:10 科技观察

我们结合之前所学，做一个界面布局小案例。案例最终效果如下：基本的布局CSS样式已经提前写好了放在根路径下，命名为style.css，具体代码如下：html,body{height:100%;}body{margin:0;padding:0;}.header,.footer{width:100%;height:80px;position:absolute;left:0;line-height:80px;text-align:center;font-size:18px;color:#fff;}.header{background-color:skyblue;top:0;}.footer{background-color:purple;bottom:0;}.main{width:100%;position:absolute;top:80px;bottom:80px;padding:20px0;text-align:center;background:khaki;}我们创建对应的子组件，分别是src\Components\Header.js,src\Components\Home.js,src\Components\Footer.js.在\src\App.js中引入以上三个子组件和样式文件：importReact,{Component}from'react'importHeaderfrom'./Components/Header'importHomefrom'./Components/Home'importFooterfrom'./Components/Footer'import'./style.css'exportclassAppextendsComponent{render(){return(<>

/>)}}exportdefaultApp然后在sub中组件，单独写初始代码，因为已经有对应的样式代码，所以可以在子组件中直接使用：//src\Components\Header.jsimportReactfrom'react'functionHeader(){return(<>Header

)}exportdefaultHeader//=======================================================//src\Components\Home.jsimportReactfrom'react'functionHome(){return(<>Home

)}exportdefaultHome//====================================================//src\Components\Footer.jsimportReactfrom'react'functionFooter(){return(<>页脚

/>)}exportdefaultFooter基础代码实现后，我们就可以看到相应的效果了。但是按照正常的编码逻辑，header和footer应该属于public部分，而无论中间部分显示什么内容，header和tail都需要显示。要集成公共组件，我们需要使用Header和Footer作为公共组件。我们需要添加一个src\Components\Layout.js组件。Layout组件的作用是显示页眉和页脚，同时将主要内容留在中间。以后我们会通过输入什么样的JSX，然后在main中显示什么样的DOM。在Layout.js中引入Header和Footer组件并在JSX中应用，然后使用JSX传递参数显示主要内容。之前我们了解到这里是一个函数组件，只需要在函数中使用形参获取Props，然后在主要内容显示的地方获取{props.children}即可：importReactfrom'react'importHeaderfrom'./Header'importFooterfrom'./Footer'functionLayout(props){return(<

{props.children}