时间戳

首页 > 解决方案 > react-bootstrap：使用带有不同消息的选项卡

javascript - react-bootstrap：使用带有不同消息的选项卡

问题描述

我正在尝试根据选项卡显示不同的消息。例如，第一个选项卡应显示“成功！这是第一个选项卡”，而第二个选项卡应显示“失败！不，这不是第一个选项卡。再试一次”。

到目前为止，我的结果显示两个选项卡都显示相同的消息。我不确定为什么会这样。我知道我的风格不同，但我想了解 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.

标签： javascriptreactjstabsreact-bootstrap

解决方案

您可以通过以下方式访问props组件内部传递的内容：

  1. 用作props参数const TabComponent = props => {..}并访问props.tab,props.temp

  2. 使用解构const TabComponent = ({ tab, temp }) => {..}和访问tab，temp

推荐阅读