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

Posted 2023-02-23

【中文标题】如何将此功能组件转换为类

【英文标题】：How do I convert this functional component to a class

【发布时间】：2021-03-06 15:05:55

【问题描述】：

组件？我想使用状态而不是 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>
  );

【问题讨论】：

我想使用状态而不是 HOC。这么多问题请解释一下。您发布的功能组件实际上是使用index

的状态

为什么需要转换为类？您是否也尝试过转换它并在某处遇到问题？显然，正如您在下面看到的那样，有些人愿意只分发代码，但并不多，而且您的问题很可能会因工作量低/质量低而被否决和关闭。如果您在转换过程中遇到特定问题，请随时更新，我们可以解释原因并尝试提供帮助，但我们希望付出努力

【参考方案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>
    );
  

【讨论】：

"Not all questions can or should be answered here".

哦，谢谢，我下次会记住这个东西