如何在 React Native 中跟踪一组映射的组件

Question

我有一组通过映射数据呈现的文本按钮：

  <View style={{paddingTop: '3%', height:"100%", width:1400, flexDirection: "row", flexWrap: 'wrap'}}>
    {this.props.data.map((item, index) => {
      console.log("profession item: ", item)
      return (
        <View 
          style={{margin:4, marginHorizontal:12}}
          key={item.pro_id}>
          <TextItemToggle
            value={item.en}
            onPress={(value)=>{this._onPressHandler(value)}}
          />
        </View>
      )
    })}
  </View>

只能突出显示其中一个按钮。按下并突出显示另一个按钮后，将切换已突出显示的按钮。我不确定如何跟踪通过映射渲染的组件。

我首先想到使用字符串（每个按钮都有一个唯一的字符串值）来引用每个按钮，但根据 https://hashnode.com/post/why-are-string-refs-considered-legacy-in-react-cit1ttd8x0spevx53ltk1gdhh 它很可能会被弃用 还有其他方法吗？

Answer 1

一种选择是存储需要在状态中突出显示的项目的 id，并在映射时检查该 id 以突出显示。

例

_onPressHandler = (event, id) => {
  this.setState({ selected: id});
}
render() {
  return (
    <View style={{paddingTop: '3%', height:"100%", width:1400, flexDirection: "row", flexWrap: 'wrap'}}>
      {this.props.data.map((item, index) => {
        console.log("profession item: ", item)
        return (
          <View 
          style={[{margin:4, marginHorizontal:12}, (this.state.selected === item.pro_id : {backgroundColor: 'grey'} : {})]}
          key={item.pro_id}>
            <TextItemToggle
            value={item.en}
            onPress={(value)=>{this._onPressHandler(value, item.pro_id)}}
            />
          </View>
        )
      })}
    </View>
  )
}