Javascript 如何使SVG元素在React上可单击？

我正在使用React Native with Expo，我有4个SVG元素，需要它们才能单击。这是以下各项的代码：

  <Svg.G
    id="Passangers-Going-B"
    onPress={() => console.log(`${cardinalPoint} Avatar Was Clicked`)}
   >
...

console.log（点击了`${cardinalint}头像`）}
>
...

有了这些代码，我可以单击SVG元素，但奇怪的是，当我尝试单击另一个元素时，单击仍然会触发我单击的最后一个元素的事件

那么，有没有更好的方法？我所需要的只是单击这些SVG元素，以切换到新的路由

有什么想法吗

我使用的是世博会上的SVG<代码>从“expo”导入{Svg}->

我还制作了一种零食，但我看它根本不起作用->

我看到的是，如果我点击其中一个元素，点击就会被卡住，因为如果我点击一个新元素，它会抛出最后一个点击元素的函数。我必须点击新元素大约3次，才能集中点击该元素

---

我看到了一些，但我不知道这与此有关。

您应该将SVG封装到一个只用于处理Press事件的组件中

import { TouchableOpacity } from "react-native"

<TouchableOpacity onPress={() => console.log(`${cardinalPoint} Avatar Was Clicked`)}>
    <Svg.G
        id="Passangers-Going-B"
    />
</TouchableOpacity>

从“react native”导入{TouchableOpacity}
log（`${cardinalint}已单击头像`）}>

---

您需要对其进行适当的样式设置。

您是否尝试过将onPressHi@Mulli改为oncode>onClick={…}，它是React Native。因此，

onPress

是一种方法。RN中没有onClick事件。True。刚刚注意到。请看我在那里看到的一些简单示例…Expo处理WebView，因为帖子中有reactjs标记，这并不明显。如果我这样做，Expo客户端将关闭，SVG将消失。我使用

TouchableWithoutFeedback

包装组件，SVG在那里，但它具有相同的行为。使用

TouchableOpacity

，把整个街区都围成一个视图。我认为这与你提到的无关。我已经尝试了很多方法，但我无法让它工作。这不起作用！