組件未使用 onClick 事件 React 呈現

Question

因此，我正在使用 google-map-react 並嘗試在單擊我在 map 上繪制的圖標時顯示一個彈出窗口。 現在，如果您單擊該圖標，控制台會正確記錄它，但沒有顯示任何內容。 這是一段代碼

  const ToolTip = ({name, address, info}) => <div>
    <h1>{name}</h1>
    <h2>{address}</h2>
    <p>{info}</p>
    </div>;
  var showToolTip = (name) =>  {
    currentToolTip = name
    console.log(currentToolTip === name)
  }
  var currentToolTip = ""
  const directory = places.map((data) => {
    //category - Directory
    if ((data.category === ButtonTitle.CampusSeeking) && data.deptMarker === "")
      return (
        <div lat={data.latitude}
        lng={data.longitude}>
        <Pin
        lat={data.latitude}
        lng={data.longitude}
          color={blue} 
          height="25px"
          width="25px"
          onClick = {() => showToolTip(data.name)}
        />
        {currentToolTip === data.name &&
        <ToolTip
        lat={data.latitude}
        lng={data.longitude}
        name = {data.name}
        address = {data.address}
        info = {data.info}>
        </ToolTip>}
        </div>
        
      );
......


return  (         
{loc === ButtonTitle.CampusSeeking && directory} )

Answer 1

您可能需要將currentToolTip更改為 state 而不是局部變量var currentToolTip = ""以在名稱更改時觸發渲染

const [currentToolTip, setCurrentToolTip] = useState("")
var showToolTip = (name) =>  {
    setCurrentToolTip(name)
}

Answer 2

您需要使用 state：

// replace
var currentToolTip = ""

// with
const [currentTooltip,setCurrentTooltip] = React.useState("");

和

  var showToolTip = (name) =>  {
    setCurrentTooltip(name)
  }

Answer 3

將 currentTooltip 保留為 state 而不是普通變量。

const [currentToolTip, setCurrentToolTip] = useState(null);

然后在圖標上更改這個onClick。

<Pin
  ...
  ...
  ...
  onClick = {() => setCurrentToolTip(data.name)}
>

因為狀態和道具會導致重新渲染，但普通變量不能。 這就是為什么您的currentToolTip === data.name這個邏輯每次都變得錯誤的原因。 因此，工具提示未呈現。