react学习系列7 调试

weixin_34185560

于 2018-02-23 17:58:00 发布

阅读量57

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://yq.aliyun.com/articles/681849

本文介绍如何在React中使用高阶组件，并通过优化displayName属性来更好地展示组件名称。通过具体示例展示了如何定义和使用高阶组件，以及如何设置displayName以反映被包装组件的真实名称。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

chrome浏览器安装react扩展
使用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 显示类似如下