陣營開發工具顯示我的組件作爲未知

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;