阵营开发工具显示我的组件作为未知

Question

我有以下简单的组件：

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组件？我是否需要将此作为变量创建并执行？

Answer 1

当您将匿名函数导出为组件时会发生这种情况。如果您命名该功能（组件）并将其导出，它将正确显示在React Dev Tools中。

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