使用循环检查组件的样式

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={{

  flex: 1,

  flexDirection: 'row',

  flexWrap: 'wrap',

  justifyContent: 'space-evenly',

  alignItems: 'stretch'

}}>

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

    if (index === selectedControl) {

      console.log({"key": control}) /* <-- here */

    }

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

  })}

</View>