问如何从javascript中的数百个类似于'getElementById()‘的类中选择本机元素？

EN

<Card>
   <Header>...with User avatar, name, posted time</Header>
   <Comment>foo bar....</Comment>
   <Heart /> // This render of heart will be a separate object to the next 
           // Render of heart on another card
</Card>

//Using hooks
 const [isLiked, setIsLiked] = useState(false);

// On mount call api if post is liked setIsLike(true)


function onPressOfHeart() {
    // any Api calls
    setIsLiked(!isLiked); // Update heart to be true
}

return (
    <View>
        <Image> source={isLiked ? colorPinkUrl : colorGreyUrl}  </Image>
    </View>
)

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [
        { isLiked: true, id: 12843 },
        { isLiked: false, id: 1267 },
        { isLiked: true, id: 154523 },
        { isLiked: false, id: 1256453 },
        { isLiked: false, id: 123454 },
      ],
      isPress: false,
    };
  }

  heartOnPress = (id) => {
    // This  OnPress would trigger your api call to Add/REmove like from user ?
    // But for this example will directly manipulate state
    this.setState((state) => {
      const data = state.data.map((el) => {
        if(el.id === id) {
          el.isLiked = !el.isLiked;
        }
        return el;
      });
      const isPress = !state.isPress
      return { data, isPress };
    });
  };

  renderListItem = ({ item }) => {
    return (
      <View style={styles.card}>
        <Text style={{ paddingRight: 10 }}>Press Me =></Text>
        <Heart isLiked={item.isLiked} id={item.id} onPress={this.heartOnPress} />
      </View>
    );
  };

  render() {
    return (
      <View style={styles.container}>
        <FlatList
          style={{ width: '100%' }}
          data={this.state.data}
          keyExtractor={(item) => item.id}
          renderItem={this.renderListItem}
        />
      </View>
    );
  }
}

const Heart = ({ isLiked, onPress, id }) => {
  return (
    <View>
      {isLiked ? (
        <TouchableOpacity onPress={() => onPress(id)}>
          <Icon name="heart" size={30} color="red" />
        </TouchableOpacity>
      ) : (
        <TouchableOpacity onPress={() => onPress(id)}>
          <Icon name="heart" size={30} color="grey" />
        </TouchableOpacity>
      )}
    </View>
  );
};