Условная стилизация компонента завершается ошибкой

Question

это простые стили, зависит от нажатых.

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

И все работает, если я сделаю это так

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

но мне нужно установить их на 1-й элемент так внутри карты у меня есть индекс, и если я сделаю так:

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

ошибка, которую я получил:

_app. js: 69 Неизученное инвариантное нарушение: style prop ожидает сопоставление свойств стиля со значениями, а не со строкой. Например, style = {{marginRight: spacing + '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 } : {}}>