javascript 将对象数组传递给React和TypeScript中的样式属性

zengzsys 于 2023-01-11 发布在 Java

关注(0)|答案(3)|浏览(103)

在JavaScript React中，我会这样做来“合并”几个样式：

const customStyle= {
    fontWeight: 'bold'
};

<p 
    style={[{fontStyle: 'italic'}, customStyle]}>
    {Some Text....}
</p>

然而，当我在TypeScript React项目中尝试此操作时，我得到了以下结果：

TS2322: Type '({ fontWeight: string; } | { fontStyle: string; })[]' is not assignable to type 'Properties<string | number, string & {}>'.
   Types of property 'filter' are incompatible.
     Type '{ <S extends { fontWeight: string; } | { fontStyle: string; }>(predicate: (value: { fontWeight: string; } | { fontStyle: string; }, index: number, array: ({ fontWeight: string; } | { fontStyle: string; })[]) => value is S, thisArg?: any): S[]; (predicate: (value: { ...; } | { ...; }, index: number, array: ({ ...; } ...' is not assignable to type 'Filter | undefined'.

这个数组构造非常方便，因为元素的顺序很重要。使用customStyle，我可以覆盖之前在对象{fontStyle: 'italic'}中定义的所有内容...
如何将多个样式传递给HTML元素的style属性？

JavaScript

来源：https://stackoverflow.com/questions/75073743/pass-array-of-objects-to-style-prop-in-react-and-typescript

3条答案

按热度按时间

k97glaaz1#

为什么不使用spread运算符呢？比如：

style={{fontStyle: 'italic', ...customStyle}}

您的样式也将以这种方式被覆盖

赞(0）回复(0）举报 2023-01-11

bcs8qyzn2#

你需要将数组缩减为一个对象

style={[{fontStyle: 'italic'}, customStyle].reduce((carry, current) => ({ ...carry, ...current}), {})}

赞(0）回复(0）举报 2023-01-11

bybem2ql3#

react中的style属性可以接收React.CSSProperties | undefined，React.CSSProperties或undefined类型的对象，但不能接收数组。
可以使用缩减器将阵列中的两个对象合并为一个对象，或者使用类型均为React.CSSProperties的两个对象的扩散操作符。
要“覆盖”一个对象，只需将展开操作符放在后面，所有重复的关键点都将被覆盖。

const customStyle: React.CSSProperties = {
  fontStyle: "normal",
  fontWeight: "bold"
};

<p
  style={{
    fontStyle: "italic",
    ...customStyle
  }}
>
  Some text
</p>

Sandbox

赞(0）回复(0）举报 2023-01-11

我来回答

javascript 将对象数组传递给React和TypeScript中的样式属性

3条答案

相关问题

热门标签

最新问答