選項卡導航不顯示。 (反應.JS / JS)

Question

我正在嘗試為我正在使用的應用程序的某個部分制作標簽導航，但我遇到了一些麻煩。 它在一段時間前工作，但由於某種原因，它沒有顯示不同的選項卡來單擊。

我對 React 和 JS 還是很陌生，所以我很難理解我之前寫的代碼。 （另外，我不確定為什么我不使用 HandleChange 但我記得我需要它）

這是我的代碼：

import React from "react";
import InfoText from "./InfoComponent";
import TransportationText from "./TransportationComponent";
import Hotels from "./HotelsComponent";
import FAQ from "./FAQComponent";
import Covid from "./CovidComponent";


const TravelersTab = () => {
  const [selectedTab, setSelectedTab] = React.useState(0);
  
  const handleChange = (event, newValue) => {
    setSelectedTab(newValue);
  };

  return (
    <div 
    position="static"
    >
      <h1 style={{
        textAlign: "center"
      }}>Travelers</h1>
      
      {selectedTab === 0 && <InfoText />}
      {selectedTab === 1 && <Hotels />}
      {selectedTab === 2 && <TransportationText />}
      {selectedTab === 3 && <Covid />}
      {selectedTab === 4 && <FAQ />}
    </div>
  );
};

export default TravelersTab;

這是我所看到的圖片：

如果有人有任何有用的信息，將不勝感激：感謝您抽出寶貴時間幫助我！！ :)

Answer 1

const TravelersTab = () => {
  const [selectedTab, setSelectedTab] = React.useState(0);
  
  const handleChange = (newValue) => {
    setSelectedTab(newValue);
  };

  return (
    <div 
    position="static"
    >
      <h1 style={{
        textAlign: "center"
      }}>Travelers</h1>
      
      {selectedTab === 0 && <InfoText onClick={handleChange(0)}/>}
      {selectedTab === 1 && <Hotels onClick={handleChange(1)}/>}
      {selectedTab === 2 && <TransportationText onClick={handleChange(2)}/>}
      {selectedTab === 3 && <Covid onClick={handleChange(3)}/>}
      {selectedTab === 4 && <FAQ onClick={handleChange(4)}/>}
    </div>
  );
};

並在每個 Tab 組件（例如“InfoText、Hotels、TransportationText...”）的 tabItem 上設置 onClick 事件。當然，這不是最佳做法，但會有所幫助。
我可以為此提供一些精彩的代碼片段。
如果需要，請發給我 DM。

~ 人才風暴