反应本地造型的优先性

Question

这个问题是关于将数组arg用于react组件上的样式支柱：style={[styles.localTextStyle, textStyle...]}。

据我所知，优先级是从最后一个元素到第一个元素。因此，在上面的示例中，textStyle将覆盖styles.localTextStyle。这很好，但是，我正在制作一个自定义组件，我希望能够从父程序中指定内联道具，并且如果没有提供支持，则内联优先而不是覆盖以前的样式。

例如，如果我正在编写一个名为Text的自定义组件：

<Text style={[styles.localTextStyle, textStyle, {
      color: color
}]}>

我会使用localTextStyle作为缺省值，然后从父级textStyle传递样式，最后使用名为color的道具来设置颜色。这只有在定义了支柱color时才能工作，否则，它将覆盖color以取消设置，尽管它可能是在textStyle中为早期样式设置的。

所以我想知道怎样才能避开这一切。目前，我已经将最后一个arg封装在一个名为Clean的函数中，该函数返回一个新对象，该对象只有定义的键值。这是可行的，但它会使代码混乱，如果有人没有一个更聪明，更好的方法来做这件事，我会感到震惊。

<Text style={[styles.localTextStyle, textStyle, Clean({
      color: color
})]}>

Answer 1

它是写在文档中的：

您还可以传递一个样式数组--数组中的最后一个样式具有优先级，因此可以使用它继承样式。

我查了一下，就像：

组件样式<内部数组<外部数组

就像这样：

• TSButton在声明中有自己的样式

<TSButton style={[Style.button,{padding:0,width:50,height:20}]} />

所以这里的优先级是>>

TSButton Styling < Style.button < padding , width, ...