react-bootstrap：使用帶有不同消息的選項卡

Question

我正在嘗試根據選項卡顯示不同的消息。 例如，第一個選項卡應顯示“成功，這是第一個選項卡”，而第二個選項卡應顯示“失敗。不。這不是第一個選項卡。再試一次”。

到目前為止，我的結果顯示兩個選項卡都顯示相同的消息。 我不確定為什么會這樣。 我知道我的風格不同，但我想了解 react-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