反應：鉻反應工具標籤組件作爲無狀態組件

Question

我安裝了鉻反應開發人員工具，我一直在使用一些日子。通過chrome react工具可以看到React組件的名稱，非常方便。我一直在想，爲什麼對於我的一些組件，chrome開發人員工具會將組件的名稱轉換爲「StatelessComponent」。在那裏有真實的組件名稱會更好，而不是'StatelessComponent'。

我想知道它爲什麼會顯示它？我確實讀了一些關於使用無狀態組件的反應是一種很好的做法，但我不確定這是否是我的情況。任何人都可以解釋爲什麼鉻反應工具將名稱改爲StatelessComponents？必須有一個重要的原因。

Answer 1

找到了解決辦法：

鉻反應開發工具標籤他們作爲無狀態的組件，如果您沒有設置這樣的顯示名：你要這樣設置顯示名，如果你正在創建

Component.displayName = "ComponentName" 

你的反應的組分與這種風格：

ReactComponent = (props) -> 

Answer 2

在這裏，你已經兩個選項：

選項1

const Button = ({name}) => (<button>{name}</button>); 
Button.displayName = 'Button'; 

選項2

function Button({name}) { 
    return (<button>{name}<button>); 
}