Javascript 如何使用reactjs和css创建垂直选项卡

我正在尝试创建一个垂直选项卡，它的功能与下面的演示链接完全相同

下面是我根据上面的演示示例尝试实现的屏幕截图

为此，我尝试了在这里找到的解决方案，但根据上面的演示示例，它并没有给我想要的

现在我决定自己尝试一下

我已经成功地通过reactjs显示了数组中的内容。当用户单击每个国家/地区时，内容 展示了那个国家的历史

我的问题：

我的问题是，我无法让它以垂直选项卡div显示内容，如屏幕截图所示

这是到目前为止的编码

import React, { Component, Fragment } from "react";
import { render } from "react-dom";

class Country extends React.Component {
  state = { open: false };
  toggleOpen = id => {
    alert(id);

    this.setState(prevState => ({
      open: !prevState.open
    }));
  };

  render() {
    return (
      <React.Fragment>
        <div key={this.props.data.id}>
          <button onClick={() => this.toggleOpen(this.props.data.id)}>
            {this.props.data.name}
          </button>
        </div>

        <div>
          {this.state.open && (
            <div>
              <div>
                <b>id: </b>
                {this.props.data.id}
              </div>
              <div>
                <b>Info: </b>
                {this.props.data.info}
              </div>
              <div>
                <b>Country name:</b> {this.props.data.name}
              </div>
              content for <b> {this.props.data.name}</b> will appear here..
            </div>
          )}
        </div>
      </React.Fragment>
    );
  }
}

class VerticalTab extends React.Component {
  constructor() {
    super();

    this.state = {
      data: [
        { id: "1", name: "London", info: "London is the capital city of England." },
        { id: "2", name: "Paris", info: "Paris is the capital of France." },
        { id: "3", name: "Tokyo", info: "Tokyo is the capital of Japan." }
      ]
    };
  }

  render() {
    return (
      <div>
        <div>
          {this.state.data.map(country => (
            <Country key={country.id} data={country} />
          ))}
        </div>
      </div>
    );
  }
}

import React，{Component，Fragment}来自“React”；
从“react dom”导入{render}；
类Country.Component{
状态={open:false}；
toggleOpen=id=>{
警报（id）；
this.setState（prevState=>({
打开：！prevState.open
}));
};
render（）{
返回(
this.toggleOpen（this.props.data.id）}>
{this.props.data.name}
{this.state.open&&(
身份证件：
{this.props.data.id}
信息：
{this.props.data.info}
国家名称：{this.props.data.name}
{this.props.data.name}的内容将出现在此处。。
)}
);
}
}
类VerticalTab扩展了React.Component{
构造函数（）{
超级（）；
此.state={
数据：[
{id:“1”，名称：“伦敦”，信息：“伦敦是英格兰的首都。”，
{id:“2”，名字：“巴黎”，信息：“巴黎是法国的首都。”，
{id:“3”，名字：“东京”，信息：“东京是日本的首都。”
]
};
}
render（）{
返回(
{this.state.data.map（country=>(
))}
);
}
}

这就是你要找的吗

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
当前选项卡：-1，
数据：[
{id:“1”，名称：“伦敦”，信息：“伦敦是英格兰的首都。”，
{id:“2”，名字：“巴黎”，信息：“巴黎是法国的首都。”，
{id:“3”，名字：“东京”，信息：“东京是日本的首都。”
]
};
this.handleClick=this.handleClick.bind（this）；
}
handleClick（当前选项卡）{
这个.setState（{currentTab}）；
}
render（）{
返回(
垂直选项卡
单击选项卡式菜单内的按钮：

{this.state.data.map（（按钮，i）=>(
this.handleClick（i）}>{button.name}
)
)
}
{this.state.currentTab！=-1&&
{this.state.data[this.state.currentTab].name}
{this.state.data[this.state.currentTab].info}

}
)
}
}
ReactDOM.render（，
document.getElementById（'root'））
);
*{框大小：边框框}
正文{字体系列：“Lato”，无衬线；}
/*设置选项卡的样式*/
.标签{
浮动：左；
边框：1px实心#ccc；
背景色：#f1f1；
宽度：30%；
高度：300px；
}
/*设置选项卡内按钮的样式*/
.选项卡按钮{
显示：块；
背景色：继承；
颜色：黑色；
填充：22px 16px；
宽度：100%；
边界：无；
大纲：无；
文本对齐：左对齐；
光标：指针；
过渡：0.3s；
字号：17px；
}
/*更改悬停按钮的背景色*/
.tab按钮：悬停{
背景色：#ddd；
}
/*创建一个活动/当前的“tab button”类*/
.tab按钮。激活{
背景色：#ccc；
}
/*设置选项卡内容的样式*/
.tabcontent{
浮动：左；
填充：0px 12px；
边框：1px实心#ccc；
宽度：70%；
左边界：无；
高度：300px；
}

这并不试图解释解决方案。@Hamed，感谢您迄今为止的贡献。这正是我想要的。解决方案只有一个问题。假设数组中有195个国家，那么创建195个onclick按钮是不好的。是否无法使用map（）方法循环遍历数组以获取每个国家的handleclick（）函数。非常感谢far@NancyMooree我更新了代码并添加了一个map函数。希望能有帮助。谢谢哈米德爵士。我接受你的回答。你是最棒的。你最后的一个愿望。该应用程序在页面加载时显示伦敦的记录。我如何防止这种情况。请你提供另一个答案。如果我只想在每次单击按钮时显示记录，该怎么办。非常感谢。希望收到你的来信Sir@NancyMooree谢谢我更新了代码以防止在页面加载时显示伦敦记录。对不起，我没有得到评论的第二部分。