react学习系列7 调试
- 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 显示类似如下
image.png
举报
腾讯云开发者
