首页 > 其他 > 详细

react之高阶组件(二)

时间:2019-12-12 13:05:11      阅读:74      评论:0      收藏:0      [点我收藏+]

高阶组件的使用

接上文————

一、像函数一样直接调用

 1 import React, { Component } from ‘react‘
 2 import A from ‘./A‘
 3 
 4 class C extends Component {
 5     render() {
 6         return (
 7             <div>
 8                 <div className="title">组件C</div>
 9             </div>
10         )
11     }
12 }
13 
14 export default A(C)

二、使用修饰器

前期需要下载依赖

首先运行 npm run eject

将webpack的配置项暴露出来

安装相关插件

npm install babel-preset-stage-2 --save-dev

npm install babel-preset-react-native-stage-0 --save-dev

之后在package.json中配置babel

 1 "babel": {
 2     "presets": [
 3       "react-app"
 4     ],
 5     "plugins": [
 6       [
 7         "@babel/plugin-proposal-decorators",
 8         {
 9           "legacy": true
10         }
11       ]
12     ]
13   },

之后在组件中直接使用

 1 import React, { Component } from ‘react‘
 2 import A from ‘./A‘
 3 
 4 @A
 5 class B extends Component {
 6     render() {
 7         return (
 8             <div>
 9                 <div className="title">组件B</div>
10             </div>
11         )
12     }
13 }
14 
15 export default B

react之高阶组件(二)

原文:https://www.cnblogs.com/dropInInt/p/12028019.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!