在单击链接时，应在react-hooks网站中创建/打开一个html页面，并显示内容

如何解决在单击链接时，应在react-hooks网站中创建/打开一个html页面，并显示内容

我已经将React-hooks网站与contentful集成在一起。现在，我可以在我的React网站中查看内容丰富的网站中的内容。单击每个图块下的...more >>链接后，我想在separate html页面中显示要打开的内容，以便查看帖子的全部内容。有人可以建议我如何实现吗？ （“主页”标签>磁贴的屏幕截图）

Demo

https://codesandbox.io/s/optimistic-lamarr-fo917

Home.js

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

const items = [
  {
    sys: {
      space: {
        sys: {
          type: "Link",linkType: "Space",id: "pih85ghtkifg"
        }
      },id: "2L5jhZhtvUwuWe20kYM2vh",type: "Entry",createdAt: "2020-09-20T11:50:53.764Z",updatedAt: "2020-09-20T11:50:53.764Z",environment: {
        sys: {
          id: "master",type: "Link",linkType: "Environment"
        }
      },revision: 1,contentType: {
        sys: {
          type: "Link",linkType: "ContentType",id: "course"
        }
      },locale: "en-US"
    },fields: {
      title: "API testing using Postman",slug: "api-testing-using-postman",image: {
        sys: {
          type: "Link",linkType: "Asset",id: "6n41KgxfwWmmeCiSemIsK2"
        }
      },shortDescription: "Cypress test to read a JSON file from Fixture folder.",description:
        "Api testing using postman. This is useful for testers.\n\npm.test()\n\nApi testing using postman. This is useful for testers. \n",duration: 3,skillLevel: "beginner",lessons: [
        {
          sys: {
            type: "Link",linkType: "Entry",id: "3op5VIqGZiwoe06c8IQIMO"
          }
        }
      ],categories: [
        {
          sys: {
            type: "Link",id: "7JhDodrNmwmwGmQqiACW4"
          }
        }
      ]
    }
  },{
    sys: {
      space: {
        sys: {
          type: "Link",id: "1ePcCVp2VzehrXpcSaq6aM",createdAt: "2020-09-20T08:43:44.388Z",updatedAt: "2020-09-20T08:43:44.388Z",fields: {
      title: "Cypress test to read a JSON file",slug: "cypress-test-to-read-a-json-file",description:
        "\nThis cy test is to read a JSON file from fixture folder. This cy test is to read a JSON file from fixture folder. This cy test is to read a JSON file from fixture folder. This cy test is to read a JSON file from fixture folder. This cy test is to read a JSON file from fixture folder. This cy test is to read a JSON file from fixture folder. \n\n> cy.get()\n\nThis cy test is to read a JSON file from fixture folder. This cy test is to read a JSON file from fixture folder. This cy test is to read a JSON file from fixture folder. \n",id: "7JhDodrNmwmwGmQqiACW4"
          }
        }
      ]
    }
  }
];

const Home = () => {
  const [blogArticles,setBlogArticles] = useState([]);

  useEffect(() => {
    setBlogArticles(items);
  },[]);

  return (
    <div className="App">
      <div className="container">
        {blogArticles.map(
          ({
            sys: { id },fields: {
              title,image,shortDescription,description,skillLevel,duration
            }
          }) => (
            <div key={id} className="column-center">
              <article key={id} className="blogmaintile">
                <img
                  className="blogImage"
                  key={image}
                  src={image}
                  alt="myimg"
                ></img>
                <div className="blogtitle">
                  <span key={title}>{title}</span>
                </div>
                <section>
                  <p className="blogdescription" key={shortDescription}>
                    {shortDescription}
                  </p>
                </section>
                <section>
                  <p className="blogdescription" key={description}>
                    {description}
                  </p>
                </section>

                <section className="col2">
                  <a href="">
                    Read more {">"}
                    {">"}
                  </a>
                </section>
              </article>
            </div>
          )
        )}
      </div>
    </div>
  );
}
export default Home;

解决方法

更多是react / javascript。请查看this。

您可以借助引导程序轻松实现此目的。请看看collapse in bootstrap

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit,enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica,craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

,

STEPS

1. 只需在锚标记上添加链接即可。
2. 请确保您的链接包含某种pacificNow.IsDaylightSavingTime()或内容的标识符，因为您需要使用该标识符来获取内容。在此处输入id。

id

在您的ContentDisplaySection中，

1. 使用<section className="col2"> <a href={slug}> Read more {">"} {">"} </a> </section> 从网址中获取ID。
2. 使用该ID提取内容数据。
3. 获取内容数据后，将其显示给用户。

react-router

App.js

function ContentDisplay() {
   const [data,setData] = React.useState(null);
   const { id } = useParams(); // from react-router

  React.useEffect(() => {
      fetchContentData(id)
        .then(data => setData(data));
  });

  return <div>{content}</div>
}

注意：-链接更改后，您不能将内容从父级传递给子级，因为刷新子页面时，数据将丢失。从父组件传递到子组件的数据在两次页面刷新之间不会保留。