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。

它可能不适合您的情况，但我只更改实际渲染方法中的样式。它将所有内容保存在一个地方（在多个地方克隆您的导入并赢得工作）。

React JS - cloneElement示例？

2 个答案: