前言

這是在工作中碰到的一個小問題，做一個小記錄

情境

我有一個區塊是透過 state 去判斷目前的裝置更改樣式

直接上 code：

{isDesktop ? (
<PageTab tabs={pageConfig.tabs} activeKey={currentTab} onChange={onTabChange} type="card" key="card" />
) : (
<PageTab tabs={pageConfig.tabs} activeKey={currentTab} onChange={onTabChange} type="line" key="line" />
)}

上面這段，type 會給這個 component 不同的樣式

Component 有沒有加上 key 的差異是什麼？

對 React 來說

沒加 key：

就是一個組件

會根據 hook 變化更新傳入的 props

有加 key：

對 react 來說是「兩個組件」

他們會在 hook 變化期間「重新 mount」

影響

不加 key 的行為

• 如果該 component 下面有自己的 state，因為是同一個 component，state 就不會被更新
• 因為是只更新 props，如果傳入的 props 是控制 component 的樣式，會看得到「樣式過度」的情形(也是我這次遇到的問題)

結論

取決於自己的情境

大家在開發 react 時

都會知道用 map 時要加上 key

因為 react 本身也是不停地在提醒

但是使用三元運算子的時候

如果用 state 來決定要傳入的 props 是什麼

這個 props 如果是跟樣式有關 就要加上key

如果是跟資料相關的其實就不需要加上 key

（但是像這樣做三元運算的渲染似乎都是針對樣式）

所以其實也可以這樣寫

<PageTab
tabs={pageConfig.tabs}
activeKey={currentTab}
onChange={onTabChange}
type={isDesktop ? "card" : "line"}
key={isDesktop ? "card" : "line"}
/>