javascript - 如何使用reactjs和CSS创建垂直选项卡

我正在尝试构建垂直选项卡，其功能与下面的演示链接完全相同
sample links from w3schools

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


为此，尝试在这里找到解决方案，但根据上面的演示样本，它并没有给我我想要的东西
Stackoverflow link

现在，我决定按照自己的方式尝试。

我已经成功地通过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>
    );
  }
}

最佳答案

这是你想要的？

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
          currentTab: -1,
          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."}
          ]
  };
  this.handleClick = this.handleClick.bind(this);
  }

  handleClick(currentTab) {
    this.setState({ currentTab });
  }

  render() {
    return (

<div>
  <h2>Vertical Tabs</h2>
  <p>Click on the buttons inside the tabbed menu:</p>
  <div className="tab">
  {this.state.data.map((button, i) => (
    <button key={button.name} className="tablinks" onClick={() => this.handleClick(i)}>{button.name}</button>
    )
    )
  }
  </div>

  <div className="tabcontent">
    {this.state.currentTab !== -1 &&
      <React.Fragment>
        <h3>{this.state.data[this.state.currentTab].name}</h3>
        <p>{this.state.data[this.state.currentTab].info}</p>
      </React.Fragment>
    }
  </div>
</div>
  )
  }
}

ReactDOM.render( < App / > ,
  document.getElementById('root')
);

* {box-sizing: border-box}
body {font-family: "Lato", sans-serif;}

/* Style the tab */
.tab {
  float: left;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
  width: 30%;
  height: 300px;
}

/* Style the buttons inside the tab */
.tab button {
  display: block;
  background-color: inherit;
  color: black;
  padding: 22px 16px;
  width: 100%;
  border: none;
  outline: none;
  text-align: left;
  cursor: pointer;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current "tab button" class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  float: left;
  padding: 0px 12px;
  border: 1px solid #ccc;
  width: 70%;
  border-left: none;
  height: 300px;
}

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<div id="root" />