Question

目前我有这个：

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

但是我需要根据i确定backGroun的颜色。当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

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

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

另一个答案

if（i === 0）就像写if（！i）

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

或

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

但是我很不明白阵列颜色来自何处。

i的目的是什么？

如果我想一分钟，我就可以在颜色上涂上“红色” [0]，对吧？

反应，如果里面有样式

4 个答案: