React + antd 主題色切換/模板切換

更新日誌：2017.11.22 新增模板切換。

期望功能：客戶端自定義切換主題色。

示例：

step1:定義3個theme的less文件。

color.less 用於自定義color覆蓋默認color變數。

step2:redux 中儲存 一個skin欄位。

初始化頁面時請求介面來dispatch skin 已展示賣家設置的默認skin；例如

return axios.get(http://localhost:8030/static/mock/footer.json) .then((res) => { if (res.data.status == success && res.data) { dispatch(setFooterInfo(res.data.data)); let initSkin = getState().home.skin; if (!initSkin) { let skin = res.data.data.skin || "default"; dispatch(setSkin(skin)) } } }).catch((error) => { console.log(error) });

select選擇框切換skin:

handleChangeSkin = (value) => { this.props.setSkin(value)}<Select placeholder=SKIN style={{ width: 60 }} onChange={this.handleChangeSkin}> <Option value="default">默認</Option> <Option value="red">紅色</Option> <Option value="yellow">黃色</Option> <Option value="blue">藍色</Option></Select>

step3：less 文件加入到頁面，這裡加入到了layout:

import PcSkinDefault from ../static/css/skin/pc-default/index.lessimport PcSkinlOne from ../static/css/skin/pc-skin-1/index.lessimport PcSkinlTwo from ../static/css/skin/pc-skin-2/index.lessimport PcSkinlThree from ../static/css/skin/pc-skin-3/index.lessconst selectSkin = (type) => { switch (type) { case one: return PcSkinlOne break; case two: return PcSkinlTwo break; case three: return PcSkinlThree break; default: return PcSkinDefault }}..........//使用dangerouslySetInnerHTML 添加less樣式文件<style dangerouslySetInnerHTML={{__html: selectSkin(children.props.skin)}} />...........

=========================分割線：階段2=============================

更新於 2017-11-22

上面的換膚方案的確存在了很大的局限性，性能方面也有影響，後來就放棄了，原因是：設計師後來的設計稿的主題色脫離了antd,不能通過簡單的替換主題色變數來完成；隨著系統不斷完善，新增了模板切換功能。於是改變了方案。

新需求如下：

（1）前端架構需支持模板切換功能，舉個例子：不同模板下產品Item的展示

（2）每個模板需要多種配色，仍以產品Item為例

思路：

(1)在redux 中儲存兩個欄位： skin 用來儲存模板類型，color 用來儲存選擇的模板顏色。

(2)如果使用了服務端渲染，在getInitialProps 調用介面獲取這兩個欄位。

(3)模板（skin）的切換使用條件渲染：

如下：

if(skin==toy){ return <ToyAdver advList={advList}/>}else if(skin==baby){ return <BabyAdver advList={advList}/>}else if(skin==jewelry){ return <JewelryAdver advList={advList}/>}else{ return <DefaultAdver skin={skin} advList={advList}/>}

(4)顏色（color）的切換：把color的樣式文件單獨抽離，在layout層動態載入對應的color.css。這一步同樣是在服務端完成的。

{ children.length?<link rel=stylesheet href={selectColor(children[0].props.skin)} />: <link rel=stylesheet href={selectColor(children.props.skin)} />}

這一期的內容寫的比較簡單，只是提供了一個思路。

=========================分割線：階段3=============================

階段3：配合拖拽功能，完成店鋪的自定義裝修，不再是僅僅選擇已有的模板 。

Loading.......

Loading.......

Loading.......