react学习系列7 调试

  1. chrome浏览器安装react扩展
  2. 使用displayName属性 官方文档 扔个例子,写了个高阶组件,名字叫HOC,如果调用多次,就会出来多个HOC,优化后显示传入的组件名。
function getDisplayName(component) {
  return component.displayName || component.name || 'Component';
}

export function withHeader(WrappedComponent) {
  return class HOC extends React.Component {
    // 在React组件查看中显示Hoc(被传入的组件名)
    static displayName = `HOC(${getDisplayName(WrappedComponent)})`
    render() {
      return <div>
        <div className="demo-header">
          我是标题
        </div>
        <WrappedComponent {...this.props}/>
      </div>
    }
  }
}

调用

class Demo extends React.Component {
  constructor() {
    super();
    this.state = {
    }
  }

  static displayName = 'I am demo component'

  render() {
    return <div>我是一个普通组件</div>
  }
}

const EnhanceDemo = withHeader(Demo);

调试面板 react 显示类似如下

image.png

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏vue学习

小程序 — 实现左滑删除效果①

(1)movable-area这个就是定义了一个移动的区域,跟普通的<view></view>的含义是一样的,不同在于,接着往下看;

6012
来自专栏施炯的IoT开发专栏

创建分辨率自适应的Windows Phone 8应用程序

1. 引言     Windows Phone 7平台只支持WVGA分辨率(480*800)的设备,这对于应用程序的UI设计来说是有利的,因为设计人员不用考虑多...

2087
来自专栏WindCoder

Android学习笔记-控件初体验

python为自己自学的,现仍处于初级阶段,这学期开启的是javaEE和Android开发,所以今后可能会同时出现这些方面的总结内容。

841
来自专栏菩提树下的杨过

silverlight数据绑定模式TwoWay,OneWay,OneTime的研究

asp.net开发中,数据绑定是一个很简单的概念,控件与数据绑定后,控件可以自动把数据按一定的形式显示出来。(当然控件上的值改变后,可以通过提交页面表单,同时后...

2316
来自专栏LinXunFeng的专栏

iOS - Swift UIButton中ImageView的animationImages动画执行完毕后,图标变暗

1603
来自专栏游戏杂谈

AS3给图片加水印文字

通过FileReference获取选中的图片,调用它的load方法,将图片存入到内存中。使用Loader(flash.display.Loader)类的loa...

1072
来自专栏梧雨北辰的开发录

iOS屏幕旋转及其基本适配方法

前段时间抽空总结了一下iOS视频播放的基本用法,发现这其中还有一个我们无法绕过的问题,那就是播放界面的旋转与适配。的确,视频播放与游戏类型的App经常会遇到这个...

1.4K5
来自专栏抠抠空间

python_控制台输出带颜色的文字方法

在开发项目过程中,为了方便调试代码,经常会向stdout中输出一些日志,默认的这些日志就直接显示在了终端中。而一般的应用服务器,第三方库,甚至服务器的一些通告也...

3249
来自专栏狂码一生

利用ajaxFileUpload.js实现多文件异步上传功能

  AjaxFileUpload.js是网络开发者写好的插件放出来供大家使用用,原理都是创建隐藏的表单和iframe然后用JS去提交,获得返回值。在这里我将网络...

70813
来自专栏xx_Cc的学习总结专栏

六天完成一个简单iOS App - 第六天

3055

扫码关注云+社区

领取腾讯云代金券