[英]react-bootstrap: using tabs with different message
我正在尝试根据选项卡显示不同的消息。 例如,第一个选项卡应显示“成功,这是第一个选项卡”,而第二个选项卡应显示“失败。不。这不是第一个选项卡。再试一次”。
到目前为止,我的结果显示两个选项卡都显示相同的消息。 我不确定为什么会这样。 我知道我的风格不同,但我想了解 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.
您可以通过以下方式访问组件内传递的props
:
使用props
作为参数const TabComponent = props => {..}
并访问props.tab
, props.temp
使用解构const TabComponent = ({ tab, temp }) => {..}
并访问tab
, temp
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.