Реагировать, стиль с, если внутри

Question

В настоящее время у меня есть это:

{data.map((row, i) =>
    <span style={{ backgroundColor: colors[i], color: '#fff' }}>{i + 1}</span>
    etc

Но мне нужно выбрать цвет backGroun в зависимости от i. Когда i будет 0, мне нужно установить цвет на красный. Мне нужно что-то вроде этого:

style={{ backgroundColor: { i === 0 ? red : colors[i] }, color: '#fff' }}

Конечно, это не сработает, но как я могу делать то, что хочу?

Answer 1

Значением свойства backgroundColor должна быть либо строка 'red', либо переменная colors[i].

style={{ backgroundColor: i === 0 ? 'red' : colors[i], color: '#fff' }}

Answer 2

Просто еще один ответ

если (i === 0) все равно, что написать, если (! I)

style={{ backgroundColor: !i ? 'red' : colors[i], color: '#fff' }}

или

style={{ backgroundColor: i ? colors[i] : 'red', color: '#fff' }}

Но я просто не понимаю, откуда появились цвета массива.

и какова цель i?

Если я подумаю, я могу просто поставить красный'в цветах [0], верно?

Answer 3

может ли это вам помочь

'use strict';

const Test_span = (props) =>{

    const color = props.index==0 ? 'red':'white';

    return (
        <div>
            <span style={{backgroundColor: color}}>{props.number}</span>
            <br/>
        </div>
    )
}

class App extends React.Component {
    constructor(){
        super()
    }

    render () {

        const temp = [10, 11, 12, 13]

        const data = temp.map((e, i)=>{
            return <Test_span number={e} index={i} key={e} />
        })

        return(
            <div>
                <ul>
                    {data}
                </ul>          
            </div>
        )
    }

}

ReactDOM.render(
    <App />,
    document.getElementById('root')
)

Answer 4

style={{ backgroundColor: i === 0 ? ‌'red' : colors[i], color: '#fff' }}