首页 > 其他分享 >react高阶组件

react高阶组件

时间:2023-01-03 15:36:55浏览次数:45  
标签:return App Component react 组件 import 高阶


1.首先介绍高阶函数

基本概念:

函数可以作为参数被传递:

函数可以作为返回值输出:

 

2.高阶组件

组件作为参数被传递,返回值是一个组件

高阶组件是一个函数

案例:将A组件作为公共组件,BC组件作为A函数的参数,来共享显示A组件

此处红框是A组件,红框里左边内容为B组件,右边内容为C组件

 

1.创建公共的A组件

将组件A封装成一个函数,接收一个参数,这个参数就是其他组件,

return的内容就是A组件的视图内容,

将其他组件要展示的位置,写成参数的标签,放置在那里,

最后导出A组件

import React,{Component} from 'react'

function A(WrappedComponent) {
return class A extends Component{
render(){
return(
<div className="a-container" >
<div className="header">
<div>提示</div>
<div>x</div>
</div>
<div>
<WrappedComponent></WrappedComponent>
</div>
</div>
)
}
}
}
export default A复制代码

2.创建B组件

引入A组件,

写B组件的内容,

将B组件作为A组件的参数导出

import React,{Component} from 'react'
import A from './A'


class B extends Component{
render(){
return(
<div className="con-B">
<img src={require('../images/bbb.png')} alt=""/>
</div>
)
}
}

export default A(B)复制代码

3.同理创建C组件

import React,{Component} from 'react'
import A from './A'

class C extends Component{
render(){
return(
<div>
<img src={require('../images/aaa.jpg')} alt=""/>
</div>
)
}
}

export default A(C)复制代码

4.将组件放置在App.js中展示

App.css中写入样式

import React, { Component } from 'react';

import './App.css';
import A from './components/A'
import B from './components/B'
import C from './components/C'
class App extends Component {
render() {
return (
<div className="App">
<A/>
<B/>
<C/>
</div>
);
}
}

export default App;复制代码

5.完成即可见,BC展示的区域,是参数标签的部分

标签:return,App,Component,react,组件,import,高阶
From: https://blog.51cto.com/u_12422954/5986017

相关文章

  • react Redux 用Redux中央仓库实现一个todolist
     Redux简单介绍Redux是一个用来管理管理数据状态和UI状态的JavaScript应用工具。随着JavaScript单页应用(SPA)开发日趋复杂,JavaScript需要管理比任何时候都要多的state(状态),Re......
  • React 小案例 无线首页底部导航组件
    效果:底部页面导航点击当前图标图标高亮页面结构1.将所用到的小图标文件放置在static文件夹下2.在src下新建tabbar文件夹,用于存放组件资源3.页面代码注意:将本页面的css引入......
  • React 小案例 路由跳转
    在上篇的基础上做路由跳转:​​上篇​​安装路由及代码:安装:cnpmi-Sreact-router-dom1.在pages里创建四个跳转页面 2.在src文件夹下创建router.js,router.js全部内容:首先引......
  • React 中用jQuery的ajax 和 axios请求数据
    目录结构 单页文件Records.js模拟一个mock数据:1.https://www.mockapi.io/ 可以使用github账号登陆2.新建项目3.我在此命名项目为accunt-app4.填写你数据的名字5.数据的......
  • react 基础 脚手架组件挂载 / 生命周期
    脚手架里的index.js配置组件的挂载importReactfrom'react'importReactDOMfrom'react-dom'//importLifefrom'./Life'importXiaojiejiefrom'./react/Xiaojiejie'......
  • React 小案例 用户评论
    功能展示:1.用户可输入用户名2.输入评论内容3.点击发布4.用户名和用户评论会被显示在列表里,第一个评论在最上面5.且显示本条评论离现在过去了多长时间6.鼠标放在事件上方可......
  • React 用axios 获取遍历json 引入swiper轮播图
    结构展示:功能展示:1.使用swiper轮播插件,2.自动轮播,当前图片高亮小按钮首先引入swiper和配置环境1.npminstall--saveswiper2.在src文件夹index.js下引入样式,避免打包失败im......
  • 记录报错 react Expected an assignment or function call and instead saw an expres
    报错:Expectedanassignmentorfunctioncallandinsteadsawanexpression no-unused-expressionsSearchforthekeywordstolearnmoreabouteacherror.期望一......
  • react Router 学习
     功能:1.进入项目后的默认路径是home,默认展示首页模块2.点击路由,切换子组件3.点击文章路由,根据传值不同进入三级详情路由,同时二级路由不显示4.点击返回首页,跳转到首页 安装......
  • react todolist 3
    功能:1.输入框输入事项,点击add,list增加一条,输入框清空并且聚焦;2.点击当前checkbox,勾选文字为已完成,取消勾选文字为未完成;父组件TodoList.js分成了三个子组件TodoHeader,TodoI......