response- bootstrap: использование вкладок с другим сообщением

Question

Я пытаюсь отобразить другое сообщение на основе вкладок. Например, первая вкладка должна сказать: «УСПЕХ! Это первая вкладка», а вторая вкладка должна сказать: «СБОЙ! Нет, это не первая вкладка. Попробуйте еще раз».

Пока мой результат показывает обе вкладки для отображения одного и того же сообщения. Я не уверен, почему это происходит. Я знаю, что у меня другой стиль, но я хочу понять, как реагируют на исправление bootstrap вкладки.

Папка содержит четыре файла для показа программы. Пожалуйста, помогите мне лучше понять, чтобы я мог стать хорошим программистом. Большое спасибо!

index. js

import React from "react"l
import { Tabs, Tab } from "react-bootstrap"
import Tab1 from "./Tab1";
import Tab2 from "./Tab2";

const MessageTab = () => {
return (
     <div>
         <Tabs defaultActiveKey={1} id="uncontrolled-tab-example">
               <Tab eventKey={1} title="Tab 1">
                    <Tab1 />
               </Tab>
               <Tab eventKey={2} title="Tab 2">
                    <Tab2 />
               </Tab>
         </Tabs>
     </div>
     );
     };

export default Tab

Tab1. js и Tab2. js (оба из они имеют одинаковую структуру, но параметры разные)

import React from "react";
import TabComponent from "./TabComponent";

const Tab1 = () => {
      const tabs = "a1";                                  // For Tab2, const tabs = "a2"
      const test = "SUCCESS!";                             // For Tab2, const test = "FAILED!"
      return (
           <div>
              <h1>Hello World 1!</h1>                     // For Tab2, <h1>Hello World 2</h1>
              <TabComponent tab={tabs} temp={test} />    
           </div>
      );
      };

export default Tab1;

TabComponent. js

import React from "react";

const TabComponent = (tab, temp) => {
      return (
            <div>
              {tab === "a1" ? 
                 <p>{temp} Yay! This is the first tab</p>                      // temp for a1 is SUCCESS!
              :
                 <p>{temp} Nope, this is not first tab. Try Again</p>          // temp for a2 or other is FAILED!
              }
            </div>;
};

export default TabComponent;

Мой результат ...

Click first tab = Failed! Nope, this is not first tab. Try Again       // Desired output: Success! This is the first tab
Click second tab = Failed! Nope, this is not first tab. Try Again      // This is a correct result.

Answer 1

Вы можете получить доступ к props внутри компонента:

1. Используя props в качестве аргумента const TabComponent = props => {..} и получив доступ к props.tab, props.temp

2. Использование деструктуризации const TabComponent = ({ tab, temp }) => {..} и доступ к tab, temp