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示例？

回答

相关问题