选项卡导航不显示。 (反应.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。

~ 人才风暴