单击链接应在 react-hooks 站点中创建/打开一个显示内容的 html 页面 [英] On click on link should create/open an html page in react-hooks site with contents displaying
本文介绍了单击链接应在 react-hooks 站点中创建/打开一个显示内容的 html 页面的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我已经将我的 React-hooks 网站与 contentful 集成在一起.现在我可以在我的 React 站点中看到内容丰富的网站的内容.单击每个磁贴下的 ...more >> 链接，我想显示接收到的内容以在 separate html 页面中打开，以便我可以查看帖子的全部内容.有人可以告诉我如何实现这一目标吗?(主页"选项卡 > 磁贴截图)
演示
https://codesandbox.io/s/optimistic-lamarr-fo917
Home.js
import React, { useState, useEffect } from "react";导入./styles.css"；常量项 = [{系统:{空间: {系统:{类型:链接"，链接类型:空间"，id:pih85ghtkifg"}},id:2L5jhZhtvUwuWe20kYM2vh"，类型:条目"，createdAt: "2020-09-20T11:50:53.764Z",更新于:2020-09-20T11:50:53.764Z"，环境: {系统:{id:主人"，类型:链接"，链接类型:环境"}},修订:1，内容类型: {系统:{类型:链接"，链接类型:内容类型"，id:课程"}},语言环境:en-US"},字段:{标题:使用 Postman 进行 API 测试"，slug: "api-testing-using-postman",图像: {系统:{类型:链接"，链接类型:资产"，id:6n41KgxfwWmmeCiSemIsK2"}},简短描述:从 Fixture 文件夹中读取 JSON 文件的 Cypress 测试.",描述:"使用邮递员进行 API 测试.这对测试人员很有用.\n\npm.test()\n\n使用邮递员进行 API 测试.这对测试人员很有用.\n",持续时间:3，技能等级:初学者"，课程: [{系统:{类型:链接"，链接类型:条目"，id:3op5VIqGZiwoe06c8IQIMO"}}],类别: [{系统:{类型:链接"，链接类型:条目"，id:7JhDodrNmwmwGmQqiACW4"}}]}},{系统:{空间: {系统:{类型:链接"，链接类型:空间"，id:pih85ghtkifg"}},id:1ePcCVp2VzehrXpcSaq6aM"，类型:条目"，createdAt: "2020-09-20T08:43:44.388Z",更新于:2020-09-20T08:43:44.388Z"，环境: {系统:{id:主人"，类型:链接"，链接类型:环境"}},修订:1，内容类型: {系统:{类型:链接"，链接类型:内容类型"，id:课程"}},语言环境:en-US"},字段:{标题:读取 JSON 文件的 Cypress 测试"，slug:cypress-test-to-read-a-json-file"，图像: {系统:{类型:链接"，链接类型:资产"，id:6n41KgxfwWmmeCiSemIsK2"}},简短描述:从 Fixture 文件夹中读取 JSON 文件的 Cypress 测试.",描述:"\n这个cy测试是从fixture文件夹中读取一个JSON文件.这个cy测试是从fixture文件夹中读取一个JSON文件.这个cy测试是从fixture文件夹中读取一个JSON文件.这个cy测试是从fixture文件夹中读取一个JSON文件.这个cy测试是从fixture文件夹中读取一个JSON文件.这个cy测试是从fixture文件夹中读取一个JSON文件.\n\n>cy.get()\n\n这个cy测试是从fixture文件夹中读取一个JSON文件.这个cy测试是从fixture文件夹中读取一个JSON文件.这个cy测试是从fixture文件夹中读取一个JSON文件.\n",持续时间:3，技能等级:初学者"，课程: [{系统:{类型:链接"，链接类型:条目"，id:3op5VIqGZiwoe06c8IQIMO"}}],类别: [{系统:{类型:链接"，链接类型:条目"，id:7JhDodrNmwmwGmQqiACW4"}}]}}];const Home = () =>{const [blogArticles, setBlogArticles] = useState([]);useEffect(() => {设置博客文章(项目)；}, []);返回 (<div className="容器">{blogArticles.map(({系统:{id}，字段:{标题，图像，简短的介绍，描述，技能等级，期间}}) =>(<div key={id} className=column-center"><article key={id} className=blogmaintile"><部分><p className="blogdescription";键={shortDescription}>{简短的介绍}</p></节><部分><p className="blogdescription";键={描述}>{描述}</p></节><a href="">阅读更多{>"}{">>}</a></节></文章>
))}
);}导出默认首页；
解决方案
STEPS
- 只需在锚标记上添加链接即可.
- 确保您的链接包含某种
id或内容标识符，因为您需要使用该标识符获取内容.让id在这里.
<a href={slug}>阅读更多{>"}{">>}</a></节> 在您的 ContentDisplaySection 中，
- 使用
react-router从 url 中获取 id. - 使用该 ID 获取内容数据.
- 获取内容数据后，将其显示给用户.
function ContentDisplay() {const [data, setData] = React.useState(null);const { id } = useParams();//来自反应路由器React.useEffect(() => {fetchContentData(id).then(data => setData(data));});返回 {content}}
App.js
function App() {返回 (<浏览器路由器>{""}<导航/>{""}<开关>{""}<路由精确路径="/";组件={Home}/><Route path="/tutorials";组件={教程}/><Route path="/tutorialslist";组件={TutorialsList}/><路由路径="/content/:id";组件={ContentDisplaySection}/></开关>{""}</BrowserRouter>);}注意:- 您不能在链接更改时将内容从父级传递给子级，因为刷新子级页面时，数据会丢失.从父组件传递到子组件的数据不会在页面刷新之间保持不变.
I have integrated my React-hooks website with contentful. Now I am able to see contents from contentful website in my react site. On click on ...more >> link under each tile I would like to display the contents received to open in a separate html page, so that I can view full content of the post. Can someone please advise me on how can I achieve that ? ( Home tab > screenshot of tiles )
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;
解决方案
STEPS
- Just add the link on the anchor tags.
- Make sure your link contains some kind of
idor an identifier of the content because you need to fetch the content using that identifier. Let takeidhere.
<section className="col2">
<a href={slug}>
Read more {">"}
{">"}
</a>
</section>
In you ContentDisplaySection,
- Take the id from the url using
react-router. - Use that id to fetch the content data.
- After fetching the content data, show it to the user.
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>
}
App.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>
);
}
NOTE :- you cannot pass content from your parent to child upon link change because upon refreshing the child page, the data is lost. The data passed from parent to child component doesn't persist between page refresh.
这篇关于单击链接应在 react-hooks 站点中创建/打开一个显示内容的 html 页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
