React Dev工具显示我的组件为Unknown [英] React Dev tools show my Component as Unknown

问题描述

我有以下简单组成部分:

I have the following simple component:

import React from 'react'
import '../css.scss'

export default (props) => {
  let activeClass = props.out ? 'is-active' : ''
  return (
    <div className='hamburgerWrapper'>
      <button className={'hamburger hamburger--htla ' + activeClass}>
        <span />
      </button>
    </div>
  )
}

当我在react开发工具中寻找它时，我会看到:

When I look for it in the react dev tools, I see:

这是因为我需要扩展React组件吗?我需要将其创建为变量吗?

Is this because I need to extend React component? Do I need to create this as a variable and do so?

推荐答案

当您将匿名函数导出为组件时，会发生这种情况.如果命名函数(组件)然后将其导出，它将正确显示在React Dev Tools中.

This happens when you export an anonymous function as your component. If you name the function (component) and then export it, it will show up in the React Dev Tools properly.

const MyComponent = (props) => {}
export default MyComponent;

这篇关于React Dev工具显示我的组件为Unknown的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！