不透明度值显示为字符串而不是数字

如何解决不透明度值显示为字符串而不是数字

我有一个使用 react hooks 的简单不透明度滑块，看起来像这样

我在这样的表格中设置不透明度

<td>
<img
   src="link"
   opacity={data.socialOpacity}
   }
   />
</td>

但是当我运行我的应用程序时，DOM 中的不透明度显示为这样的字符串

<img src="https://wp-iframe.icon.webp" color="#000" opacity="1">

为什么不透明度值显示为字符串而不是数字？

解决方法

一些注意事项：

• 我们在 html 中没有 opacity 属性。

• 我们在 html 中也没有 color 属性，css color 属性不会影响图像。

• 您应该在 react 和 setState() 函数中使用状态管理。

• 或者使用带有 style 属性的简单代码：

<div style={ {opacity: data.socialOpacity,color: "#111"} } >...</div>