javascript - 使用循环检查组件的样式

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。因此，检查按钮何时在 render 中突出显示(即 index === selectedControl)并且按钮的键是 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>