如何使用React/GatsbyJS将内容数据随机呈现到div onClick

npm install gatsby react react-dom

npx gatsby new my-gatsby-site

cd my-gatsby-site

import React from "react";

const Content = ({ data }) => {
  const handleClick = () => {
    const randomIndex = Math.floor(Math.random() * data.length);
    const randomContent = data[randomIndex];
    console.log(randomContent);
  };

  return (
    <div onClick={handleClick}>
      <button>随机呈现内容</button>
    </div>
  );
};

export default Content;

import React from "react";
import Content from "../components/Content";

const IndexPage = () => {
  const data = [
    "内容1",
    "内容2",
    "内容3",
    // 添加更多的内容
  ];

  return (
    <div>
      <h1>随机内容呈现示例</h1>
      <Content data={data} />
    </div>
  );
};

export default IndexPage;

module.exports = {
  pathPrefix: "/",
};

npm start