使用“ ...”从现有对象创建新对象时出错：在这种环境下，分配源必须是一个对象

Question

在我的React Native应用程序中，我遇到一种情况，即该组件的一个特定子组件render应该收到绿色或红色borderColor。

现在，我不想styles为这两种情况在我中创建两个单独的条目，因为它们仅在borderColor属性上有所不同。

我的想法是从我styles喜欢的对象中派生适当的样式对象，如下所示：

const styles = StyleSheet.create({
  amountSection: {
    borderWidth: 1,
    flex: 1,
    flexDirection: 'row',
    borderRadius: 3
  }
})

render() {
  const amountBorderColor = this.state.isClaim ? 'green' : 'red'
  const amountStyles = {
    ...styles.amountSection,
    borderColor: amountBorderColor
  }

  return (
    // ... apply amountStyles at appropriate component
  )
}

但是，此代码给出以下错误：

未处理的JS异常：在这种环境下，Assign的来源必须是一个对象。此错误是性能优化，不符合规范。

显然，错误发生在我定义的行上amountStyles。有人知道为什么会这样吗？我的语法有问题吗？我使用该...符号从现有对象创建一个新对象，并向其添加一些其他属性。

Answer 1

正如@PitaJ指出的那样，我的问题是StyleSheet.create不会返回普通的javascript对象，因此...无法应用运算符。

我也只想为原始问题添加解决方案，那就是从仅添加一个属性的一个基本对象派生两个不同的样式对象。

该文档的StyleSheetAPI表明，该方法flatten可以用于这样的：

const amountBorderColor = this.state.isClaim ? 'green' : 'red'
const amountStyles = StyleSheet.flatten([styles.amountSection, {borderColor: amountBorderColor}])