React JS - пример cloneElement?

Question

Когда я изменяю встроенный стиль компонента в зависимости от состояния, я получаю эту ошибку.

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'; 

    } 
} 

Итак, где и как я могу использовать этот клон? В документации нет твердых примеров.

Шон

Answer 1

Нет необходимости 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)} /> 

Answer 2

Я предполагаю, что вы определяете, что 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.

Это может не понравиться вашей ситуации, но я только изменяю стили внутри фактического метода рендеринга. Он держит все в одном месте (клонирование вашего импорта в более чем одном месте не будет работать).