Question

我正在尝试构建垂直标签，其功能与下面的演示链接完全相同 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>
    );
  }
}

Answer 1

这是您要寻找的吗？

package.json

core

app

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

1 个答案: