条件组件样式失败并显示错误

Question

这是一个简单的样式，取决于点击。

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

如果我这样做，一切都会起作用

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

但是我需要将它们设置为第一个元素，以便在 map 中我获得了索引，如果我这样做：

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

我得到的错误：

_app.js：69 未捕获的不变冲突：style道具需要从样式属性到值的映射，而不是字符串。例如 style={{marginRight： sspaceing + 'em'}} 当使用 JSX 时。

Answer 1

如果index不等于 0 和styles(不包含在大括号中(，则传递空对象：

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

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

const { render } = ReactDOM
const styles = {
backgroundColor: 'blue',
color: 'white',
width: 50
}
const Test = ({index}) => <div style={index===0?styles:{}}>Test</div>
render (
(<div>
<Test index={0}/>
<Test index={1}/>
</div>),
document.getElementById('root')
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script><div id="root"></div>

Answer 2

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

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