昨天在公司遇到 React Style 行內樣式的雷，害我 dubug 了老半天。

是這樣的我們公司有兩個 B2C 的網站平台長得很像，差異只在顏色與風格不同，一個網站前端是 React v14，另一個相對新是用 React v16，而兩個網站很多功能都要一樣，所以一個前端元件寫好後要想辦法讓 React 的 14 版和 16 版共用，要到各自不同的專案複製貼上元件程式碼接著微調。

通常是舊的不支援新的，於是先改 React v14 的網站，按照該元件既有寫法，行內樣是這樣寫：

<div style={{ width: "820", height: "360" }} ></div>

改完後將這個元件貼給 React v16 網站卻破版了..。

debug 兩個小時看了一堆文件和教學影片，改成下面兩種寫法 React v16 才正常。

這樣，寬高為字串

<div style={{ width: "820px", height: "360px" }} ></div>

或者這樣，寬高型別為數字

<div style={{ width: 820, height: 360 }} ></div>

React 官網是這樣說滴：數字 number 會自動補上 'px'

最後發現是 React 版本問題：

  • React 14 版 '數字'(String)、數字(Number)、'數字px'(String) 可以 work
  • React 16 版 只有數字(Number)、'數字px'(String) 可以 work

官方討論串見此，在 2016年 時有更動這部分：https://github.com/facebook/react/pull/5140