React JS - cloneElement示例？

當我根據狀態更改組件的內聯樣式時，出現此錯誤。React JS - cloneElement示例？

Warning: `div` was passed a style object that has previously been mutated. Mutating `style` is deprecated.

在我的渲染函數中，我在返回前調用這個函數來檢查屬性。

this._isGameOver();

_isGameOver：

_isGameOver() 
{ 
    if (this.props.gameOver === false) 
    { 
     style.well.backgound = '#f5f5f5'; 
     style.h1.color = '#32936F'; 
    } 
    else 
    { 
     style.well.background = 'red'; 
     style.h1.color = 'white'; 

    } 
}

那麼，和我怎麼使用這個克隆？該文檔沒有給出任何可靠的例子。

肖恩

來源

2016-08-02 sean le roy

在你的例子無需cloneElement，簡單地返回，而不是突變的存在一個新的樣式對象。

_isGameOver() { 
    if (this.props.gameOver === false) { 
     return { 
     well: { background: '#f5f5f5' }, 
     h1: { color: '#32936F' } 
     } 
    } 
    else return { 
     well: { background: 'red' }, 
     h1: { color: 'white' } 
    } 
}

然後，您可以合併使用舊款式新款式，無論你需要使用類似Object.assign

var newStyle = this._isGameOver() 

return <h1 style={Object.assign({}, style.h1, newStyle.h1)} />

來源

2016-08-02 23:32:24 azium

你知道，這正是我以前的做法，但我認爲這是不好的做法...爲什麼，我不知道，但它確實解決了這個問題。我剛剛在React網站上閱讀了克隆，並認爲應該是更好的方法。 –

將數據視爲不可變的數據，特別是現今，被認爲是最佳實踐。事情變得更可預測，性能的不變性成本很低，甚至更低，像Immutable.js – azium

我會堅持這種方法，因爲它非常簡單，並且易於使用。謝謝您的幫助！ –

我猜你定義一個style對象以外的組件（可能導入它？）。所以無論你在哪裏修改該風格，都需要對其進行克隆。

我總是輸入爲baseStyles（以表明它不應該變異）並使用lodash.cloneDeep()（因爲克隆深層對象很麻煩）。

所以，你的功能變得

import cloneDeep from 'lodash/cloneDeep'; 
import baseStyle from '../blah/yourStyle.js'; 

_isGameOver() 
{ 
    const style = cloneDeep(baseStyle); 
    if (this.props.gameOver === false) 
    { 
     style.well.backgound = '#f5f5f5'; 
     style.h1.color = '#32936F'; 
    } 
    else 
    { 
     style.well.background = 'red'; 
     style.h1.color = 'white'; 

    } 
}

你也可以這樣做：

const wellStyle = { 
    ...style.well, 
    background: '$f5f5f5', 
}

，然後通過wellStyle你的組件，而不是style.well。

它可能不適合您的情況，但我只改變實際渲染方法中的樣式。它將所有東西都保存在一個地方（克隆你在多個地方的導入不起作用）。

來源

2016-08-02 23:45:11

我甚至沒有導入我的風格，我只是把它們放在對象的下面，並在必要時調用它們。我試圖把它們放在一個單獨的文件中，但我無法讓它工作。你會有任何樣式的js文件風格應該看起來如何？我發現很難在任何地方看到例子。 –

React JS - cloneElement示例？

回答

相關問題