IT技术 - 单击链接应在 react-hooks 站点中创建/打开一个显示内容的 html 页面 - 吾爱随笔录

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

IT技术 reactjs react-hooks contentful

2021-05-18 09:56:34

我已将我的React-hooks网站与contentful. 现在我可以在我的 React 站点中看到内容丰富的网站的内容。单击...more >>每个磁贴下的链接时，我想显示接收到的内容以在separatehtml 页面中打开，以便我可以查看帖子的完整内容。有人可以告诉我如何实现这一目标吗？（“主页”选项卡 > 磁贴截图）

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",
            linkType: "Entry",
            id: "7JhDodrNmwmwGmQqiACW4"
          }
        }
      ]
    }
  },
  {
    sys: {
      space: {
        sys: {
          type: "Link",
          linkType: "Space",
          id: "pih85ghtkifg"
        }
      },
      id: "1ePcCVp2VzehrXpcSaq6aM",
      type: "Entry",
      createdAt: "2020-09-20T08:43:44.388Z",
      updatedAt: "2020-09-20T08:43:44.388Z",
      environment: {
        sys: {
          id: "master",
          type: "Link",
          linkType: "Environment"
        }
      },
      revision: 1,
      contentType: {
        sys: {
          type: "Link",
          linkType: "ContentType",
          id: "course"
        }
      },
      locale: "en-US"
    },
    fields: {
      title: "Cypress test to read a JSON file",
      slug: "cypress-test-to-read-a-json-file",
      image: {
        sys: {
          type: "Link",
          linkType: "Asset",
          id: "6n41KgxfwWmmeCiSemIsK2"
        }
      },
      shortDescription: "Cypress test to read a JSON file from Fixture folder.",
      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",
      duration: 3,
      skillLevel: "beginner",
      lessons: [
        {
          sys: {
            type: "Link",
            linkType: "Entry",
            id: "3op5VIqGZiwoe06c8IQIMO"
          }
        }
      ],
      categories: [
        {
          sys: {
            type: "Link",
            linkType: "Entry",
            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;

2个回答

这更多是react/javascript。请看看这个。

借助引导程序，您可以轻松实现这一目标。请看一下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>

脚步

只需在锚标签上添加链接即可。
确保您的链接包含某种id内容或内容标识符，因为您需要使用该标识符获取内容。拿id这里吧。

<section className="col2">
   <a href={slug}>
     Read more {">"}
    {">"}
  </a>
</section>

在您的 ContentDisplaySection 中，

使用从 url 中获取 id react-router。
使用该 ID 获取内容数据。
获取内容数据后，将其显示给用户。

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

应用程序.js

function App() {
  return (
    <BrowserRouter>
      {" "}
      <Navigation />{" "}
      <Switch>
        {" "}
        <Route exact path="/" component={Home} />
        <Route path="/tutorials" component={Tutorials} />
        <Route path="/tutorialslist" component={TutorialsList} />
        <Route path="/content/:id" component={ContentDisplaySection} />
      </Switch>{" "}
    </BrowserRouter>
  );
}

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

其它你可能感兴趣的问题

上一篇useCallBack 和 useEffect 无限循环下一篇react流中的类型props错误，将 create-react 应用程序转换为 webpack