Javascript 条件组件样式设置失败，出现错误

这是一个简单的样式依赖于单击

const styles = {
  marginLeft: count * (-20) + 40 +'%'
}

如果我这样做，一切都会好起来的

return <div key={index} className={classnames({ 'food-photo': content })} style={styles}>

返回

但我需要将它们设置为第一个元素，这样在映射中我就得到了索引，如果我这样做的话：

return <div key={index} className={classnames({ 'food-photo': content })} style={(index===0)?{styles}:''}>

返回

我得到的错误是：

_app.js:69未捕获不变冲突：

style

prop需要从样式属性到值的映射，而不是字符串。例如 style={{marginRight:spacing+'em'}当使用JSX时

---

只需更改else大小写以传递一个空对象。下面的代码可以正常工作

return <div key={index} className={classnames({ 'food-photo': content })} style={(index===0) ? { ...styles } : {}}>

返回

如果

索引

不等于0，则传递空对象，否则传递

样式

（不包含在大括号中）：

return <div key={index} className={classnames({ 'food-photo': content })} style={index===0?styles:{}}>

返回

以下代码片段是一个概念的快速而肮脏的证明：

const{render}=ReactDOM
常量样式={
背景颜色：“蓝色”，
颜色：'白色'，
宽度：50
}
常量测试=（{index}）=>Test
渲染(
(
),
document.getElementById（'root'））
)

---

否，错误：_app.js:69未捕获不变冲突：

样式

属性需要从样式属性到值的映射，而不是字符串。例如，style={{marginRight:spacing+'em'}当使用JSXfinally xD时，我也找到了一个解决方案，通过传递'margin left'而不是marginLeft xD，但保持语法不变应该更好。实际上，代码不起作用，而且我在控制台中也找不到错误。IDE内部：类型“{styles….}”不可分配给类型“cssproperties”，问题可能是样式中的“%”。您可能需要传递一个数值您可以安全地将

{…styles}

交换为

样式

（不带花括号），请在这方面进行检查