如何将此功能组件转换为类

Question

如何将此功能组件转换为类组件？我想使用状态而不是 HOC。这是代码沙盒https://codesandbox.io/s/stoic-hypatia-t5beo?file=/src/App.js►958中此代码的示例

import React, { useState } from "react";
import "./styles.css";
const data = [
  {
    id: 1,
    title: "Heading1",
    description:
      "Heading 1 Good day, everyone! \nI have headers. For each title."
  },
  {
    id: 2,
    title: "Heading2",
    description:
      "Heading 2 Good day, everyone! I have headers. For each title."
  },
  {
    id: 3,
    title: "Heading3",
    description:
      "Heading 3 Good day, everyone! \nI have headers. For each title."
  },
];
export default function App() {
  const [index, setIndex] = useState(0);
  return (
    <div className="container">
      <div className="headings">
        {data.map((d, i) => (
          <button
            onClick={() => {
              setIndex(i);
            }}
          >
            {d.title}
          </button>
        ))}
      </div>
      <div className="description">
        <div className="content">{data[index]["description"]}</div>
      </div>
    </div>
  );
}

Answer 1

这是你的类组件

代码沙盒：https://codesandbox.io/s/upbeat-wildflower-yeqvd

import React, { useState } from "react";
import "./styles.css";

const data = [
  {
    id: 1,
    title: "Heading1",
    description:
      "Heading 1 Good day, everyone! \nI have headers. For each title, I have a description. \nFor example, I want the text to change, when I click on heading 2, please pay attention to the example, https://ibb.co/8mCHK5y \nI want to know what is best to use for such purposes? react-router or something else? for example some npm package. And what if there are such examples or lessons on the Internet, please leave me a link"
  },
  {
    id: 2,
    title: "Heading2",
    description:
      "Heading 2 Good day, everyone! I have headers. For each title, I have a description. For example, I want the text to change, when I click on heading 2, please pay attention to the example, https://ibb.co/8mCHK5y I want to know what is best to use for such purposes? react-router or something else? for example some npm package. And what if there are such examples or lessons on the Internet, please leave me a link"
  },
  {
    id: 3,
    title: "Heading3",
    description:
      "Heading 3 Good day, everyone! \nI have headers. For each title, I have a description. \nFor example, I want the text to change, when I click on heading 2, please pay attention to the example, https://ibb.co/8mCHK5y \nI want to know what is best to use for such purposes? react-router or something else? for example some npm package. And what if there are such examples or lessons on the Internet, please leave me a link"
  },
  {
    id: 4,
    title: "Heading4",
    description:
      "Heading 4 Good day, everyone! \nI have headers. For each title, I have a description. \nFor example, I want the text to change, when I click on heading 2, please pay attention to the example, https://ibb.co/8mCHK5y \nI want to know what is best to use for such purposes? react-router or something else? for example some npm package. And what if there are such examples or lessons on the Internet, please leave me a link"
  },
  {
    id: 5,
    title: "Heading5",
    description:
      "Heading 5 Good day, everyone! \nI have headers. For each title, I have a description. \nFor example, I want the text to change, when I click on heading 2, please pay attention to the example, https://ibb.co/8mCHK5y \nI want to know what is best to use for such purposes? react-router or something else? for example some npm package. And what if there are such examples or lessons on the Internet, please leave me a link"
  },
  {
    id: 6,
    title: "Heading6",
    description:
      "Heading 6 Good day, everyone! \nI have headers. For each title, I have a description. \nFor example, I want the text to change, when I click on heading 2, please pay attention to the example, https://ibb.co/8mCHK5y \nI want to know what is best to use for such purposes? react-router or something else? for example some npm package. And what if there are such examples or lessons on the Internet, please leave me a link"
  }
];

export default class App extends React.Component {
  state = {
    index: 0
  }
  
  render() {
    return (
      <div className="container">
        <div className="headings">
          {data.map((d, i) => (
            <button
              onClick={() => {
                this.setState({index: i})
              }}
            >
              {d.title}
            </button>
          ))}
        </div>
        <div className="description">
          <div className="content">{data[this.state.index]["description"]}</div>
        </div>
      </div>
    );
  }
}