条件组件样式失败并出现错误

Question

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

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 Uncaught Invariant Violation：style 属性需要从样式属性到值的映射，而不是字符串。例如， 使用 JSX 时 style={{marginRight: spacing + 'em'}}。

Answer 1

如果index 不等于0 和styles（不包含在花括号中）则传递空对象：

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

跟随 sn-p 是一个概念的快速而肮脏的证明：

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 } : {}}>