Reactjs，带有状态数据的内联样式

Question

我已经将一组单词映射到按钮组。在状态下我有一个索引和一个颜色值

this.state = {
            selectedWordIndex:'',  //e.g. 3
            selectedWordColor:''  //e.g. rgb(137,197,8)
        }

索引和颜色在另一个函数中设置。

var counter = -1;
return this.state.sentenceArray.map((word) => {
        counter += 1
        return (
            <button
                key={counter}
                type="button"
                className="btn btn-default"
                style={{}}>{word}</button>);});

如何更改索引按钮的颜色？

Answer 1

所以如果你想改变索引为===的按钮的颜色this.state。 selectedWordIndex，下面的代码应该可以工作。

var counter = -1;
return this.state.sentenceArray.map((word) => {
        counter += 1
        return (
            <button
                key={counter}
                type="button"
                className="btn btn-default"
                style={ this.state.selectedWordIndex === counter ? 
                        { color:this.state.selectedWordColor } : 
                        {}
                      }
            >{word}</button>);});