javascript - 使用 `...` 从现有对象创建新对象时出错 : In this environment the sources for assign MUST be an object

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
  )
}

但是，此代码会出现以下错误:

Unhandled JS Exception: In this environment the sources for assign MUST be an object.This error is a performance optimization and not spec compliant.

显然错误发生在我定义 amountStyles 的那一行。任何人都知道为什么会这样？我的语法有问题吗？我正在使用 ... 表示法从现有对象创建新对象并向其添加一些附加属性。

Answer 1

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

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

docs对于 StyleSheet API，表明方法 flatten 可用于此:

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