React高阶函数组件(HOC)
2023-09-11 14:15:29 时间
方式一:Layout 作为一个高阶组件
components/MyLayout.js
import Header from './Header'; const layoutStyle = { margin: 20, padding: 20, border: '1px solid #DDD' }; const withLayout = Page => { return () => ( <div style={layoutStyle}> <Header /> <Page /> </div> ); }; export default withLayout;
pages/index.js
import withLayout from '../components/MyLayout'; const Page = () => <p>Hello Next.js</p>; export default withLayout(Page);
pages/about.js
import withLayout from '../components/MyLayout'; const Page = () => <p>This is the about page</p>; export default withLayout(Page);
方式二:Page content 作为一个 prop
components/MyLayout.js
import Header from './Header'; const layoutStyle = { margin: 20, padding: 20, border: '1px solid #DDD' }; const Layout = props => ( <div style={layoutStyle}> <Header /> {props.content} </div> ); export default Layout;
pages/index.js
import Layout from '../components/MyLayout.js'; const indexPageContent = <p>Hello Next.js</p>; export default function Index() { return <Layout content={indexPageContent} />; }
pages/about.js
import Layout from '../components/MyLayout.js'; const aboutPageContent = <p>This is the about page</p>; export default function About() { return <Layout content={aboutPageContent} />; }
.
相关文章
- (尚025)Vue_案例_静态组件
- iview日期组件取一个时间区间
- react 自定义 百度地图(BMap)组件
- react 创建组件 (四)Stateless Functional Component
- react组件是怎么来的
- react-native 常用组件的用法(一)
- 从零开始的react入门教程(二),从react组件说到props/state的联系与区别
- android-UI组件实例大全(六)------ImageView图像视图
- 【软通动力】HarmonyOS三方件开发指南(6)-ActiveOhos_sqlite组件
- 《iOS组件与框架——iOS SDK高级特性剖析》——第2章,第2.5节地理编码和反向地理编码
- React学习笔记 -- 组件通信之路由传参(react-router-dom)
- 鸿蒙组件包之 ohos.accessibility (HarmonyOS鸿蒙开发基础知识)
- SPA单页应用的2种类型分页技术(React、Vue等组件化开发)
- react项目Bug:组件销毁清除监听(Can't perform a React state update on an unmounted component.)
- React之类组件与函数组件
- React函数式组件的性能优化
- react基础知识,jsx规则,组件定义
- react兄弟组件通信之pubsub-js
- vue购物车组件设计结构
- 试着用React写项目-利用react-router解决跳转路由等问题(二)
- 微信移动端数据库组件 WCDB 系列(三) — 解析 WINQ 原理
- Vue学习第36天——PC端和移动端常用的Vue UI组件库
- React函数式组件值之useContext()和useReducer()
- React函数式组件值之useEffect()
- 从0开发游戏引擎之2D基础组件的实现(Image;Label;Button)