Chrome 未能在“CSSStyleDeclaration”上设置索引属性:不支持索引属性setter

bis0qfac  于 2023-02-27  发布在  Go
关注(0)|答案(5)|浏览(386)

我在我的React项目时, chrome 版本更新到74(最新版本)以上的错误。

u91tlkcl

u91tlkcl1#

这里描述了这个问题的根本原因。本质上,当你把一些元素的style属性作为stringarray传递时,就会发生这个问题。比如style="string"style={[array]}。这看起来可能不相关(我不认为有人故意试图把stringArray发送到style属性),但在我的例子中,这是根本原因。
要找到错误,我建议仔细调查您的代码与调试器在Chrome或其他浏览器。
下面是我的错误示例

我错误地设置了styles.radioButton(它被用作某个元素的style属性的值),使用了spread操作符...spacing.xxSmall,但spacing.xxSmall只是一个字符串,并被扩展到以字符为数组成员的数组。以前style的索引(0,1,2,...)的属性被忽略,但现在网站被压碎了。

798qvoo8

798qvoo82#

我使用的是Angular库,其中一些库现在不支持内联样式(对我来说是ngx-avatar,它在Firefox和Chrome上不起作用:74)
之前:
<ngx-avatar style="border-radius="50%"></ngx-avatar>
之后:
<ngx-avatar [style.border-radius]="'50%'"></ngx-avatar>
我想你也可以为React做同样的尝试。

tuwxkamq

tuwxkamq3#

在我的RN Expo Web应用程序中,我在执行以下操作时遇到此错误

style={{ padding: 5, ...props.style }}

我意识到传递名为“style”的prop,然后将其用作内联样式是导致此错误的原因。解决此错误的方法是为prop使用不同的名称,并执行类似于...

style={{ padding: 5, ...props.listSectionStyle }}

只要将 prop 名称从“style”更改为其他任何名称,如“listSectionStyle”(或您选择的任何名称),就可以解决是否是由于上述原因导致的问题。
参考:Fyodor在回复中分享的链接有助于理解真实的的问题。

4smxwvx5

4smxwvx54#

我在使用prime ng的<p-skeleton>时遇到了这个错误,我所做的是将一个样式直接传递给 backbone ,如下所示:

<p-skeleton width="97.5%" height="20rem" style="margin-bottom: 2rem;"></p-skeleton>

因此,我没有直接使用style,而是使用class属性来给予margin bottom(我的类已经定义好了)。***这为我消除了错误。***更新后的行如下所示:

<p-skeleton width="97.5%" height="20rem" borderRadius="16px" class="mb-40"></p-skeleton>
xghobddn

xghobddn5#

用于Expo/RN

您可能会以这种方式给出一个格式错误的样式表数组:

<compo style={[foo, biz, bar]} />

您需要做的是将样式表扁平化:

import * as Native from 'react-native';

<compo style={Native.StyleSheet.flatten([foo, biz, bar])} />

相关问题