reactjs - 如何点击鼠标打开下一页

Question

TLDR

我想nested routing在 React 中实现。我可以使用什么库？

问题

今天是个好日子！我有标题。对于每个标题，我都有一个描述。例如，我想改变文字，当我点击标题2时，请注意下面的例子。我想知道什么最适合用于此类目的？反应路由器或其他什么？例如一些 npm 包。还有如果网上有这样的例子或教训，请给我一个链接

例子

https://ibb.co/8mCHK5y

标签： reactjsreduxreact-reduxreact-routerreact-router-dom

Answer 1

这是使用简单useState钩子的示例。

完整代码：

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 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>
  );
}

代码沙盒链接

PS：我正忙着编写这个东西，并没有看到你的最新评论，天哪。但无论如何都要发布它，我希望它对某人有所帮助。