小编ara*_*ine的帖子

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

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

为此，尝试了此处找到的解决方案，但它没有按照 Stackoverflow 链接上面的演示示例提供我想要的内容

现在我决定走自己的路去尝试一下。

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