使用循环检查组件的样式

Question

我使用循环创建了一组按钮。这些按钮的背景颜色一个一个地改变，一次一个按钮。有什么方法可以在调用函数时获取背景颜色为黑色的按钮的键。

export default class App extends Component<Props> {

  constructor(props) {

        super(props);

        this.state = {

            selectedControl: 0,

            controls: ["TITLE1", "TITLE2", "TITLE3"]

        };

    }

  componentDidMount() {

        this.timerHandle = setInterval(() => {

            this.setState(({selectedControl, controls}) =>

               ({selectedControl: (selectedControl + 1) % controls.length})

            );

        }, 1000);

    }

  render() {

    const {selectedControl, controls} = this.state;

    return (

      <View style={{ flex: 1, flexDirection: 'row', flexWrap: 'wrap',  justifyContent: 'space-evenly',

      alignItems: 'stretch' }}>

      {controls.map((control, index) => (

          <Button key={control}  title={control} buttonStyle={index === selectedControl ? styles.highlighted : styles.buttonStyle}/>

          ))}

    </View>

    );

  }

}

const styles = StyleSheet.create({

  buttonStyle: {

     height: '100%', 

  },

  highlighted: {

    height: '100%',

    backgroundColor: 'black', 

  }

});

Answer 1

按钮键设置为control。因此，请检查按钮何时突出显示（即index === selectedControl）render并且按钮的键是control。<View style={{&nbsp; flex: 1,&nbsp; flexDirection: 'row',&nbsp; flexWrap: 'wrap',&nbsp; justifyContent: 'space-evenly',&nbsp; alignItems: 'stretch'}}>&nbsp; {controls.map((control, index) => {&nbsp; &nbsp; if (index === selectedControl) {&nbsp; &nbsp; &nbsp; console.log({"key": control}) /* <-- here */&nbsp; &nbsp; }&nbsp; &nbsp; return <Button key={control}&nbsp; title={control} buttonStyle={index === selectedControl ? styles.highlighted : styles.buttonStyle}/>&nbsp; })}</View>