Я пытаюсь прочитать данные из файла JSON, содержащего список блогов. Я хочу разбить каждый из этих блогов на небольшие абзацы. Я думал, что добавление \n поможет, но это не так. Как я могу этого добиться?
Это мой blogs.json файл:
[
{
"id": 1,
"name": "The 48 Laws Of Power",
"blog": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. \n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. \n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum",
"img": "https://i.ibb.co/RpP2LGp/48-Laws-Of-Power.jpg"
},
{
"id": 2,
"name": "Rich Dad Poor Dad",
"blog": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. \n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. \n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum",
"img": "https://i.ibb.co/8Brh2Nc/rich-Dad-Poor-Dad.jpg"
},
{
"id": 3,
"name": "Show Your Work",
"blog": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. \n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. \n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum",
"img": "https://i.ibb.co/VjLBT1T/show-Your-Work.jpg"
},
{
"id": 4,
"name": "Atomic Habits",
"blog": "Atomic Habits by James Clear is an incredible book on habits and the massive effect that they have on our lives. Published in 2018 and now an international bestseller, Atomic Habits centers around this idea that “habits are the compound interest self-improvement.” If you want to improve yourself in any way, look first to your daily habits. \n Clear relates habits to compound interest; an interesting model he suggests that really helped me visualize the effect that these tiny behaviors had on our lives is set up like this. \n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. \n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. \n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum",
"img": "https://i.ibb.co/ss0kLQw/atomic-Habits.jpg"
},
{
"id": 5,
"name": "The Almanack Of Naval Ravikant",
"blog": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. \n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. \n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum",
"img": "https://i.ibb.co/87SmcFz/alamanack-naval.jpg"
},
{
"id": 6,
"name": "The 4-Hour Work Week",
"blog": "The first chapter, D is for Definition, followed its name and defined the clear cut differences in mindset between the new rich and the deferrers. This clued me in to the goal of this book, to escape what has been perpetuated our entire lives. However, I was still skeptical. It presented several, grandiose claims; how could any of it be truly doable? Sure, someone like Tim Ferriss, Princeton graduate and energy-supplement extraordinaire could pull it off, but that doesn't mean that me, the average Joe, could somehow make an automated stream of revenue so that I can live all around the world and have no worries.The next chapter, E is for Elimination, had the most profound effect on me. It presented ideas such as Parkinson's Law (work expands to fill the time allotted to it) and the Pareto Principle (80/20), ideas I had heard from videos before, but never explained as well as in this chapter. After reading, I immediately evaluated my time wasters and consumers and began to slowly deconstruct my day and how to best optimize it. This chapter was one that I could apply the day after reading it successfully, so it was very useful. \n The next chapter, E is for Elimination, had the most profound effect on me. It presented ideas such as Parkinson's Law (work expands to fill the time allotted to it) and the Pareto Principle (80/20), ideas I had heard from videos before, but never explained as well as in this chapter. After reading, I immediately evaluated my time wasters and consumers and began to slowly deconstruct my day and how to best optimize it. This chapter was one that I could apply the day after reading it successfully, so it was very useful. \n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum",
"img": "https://i.ibb.co/Pxtt4dH/4-hour-work-week.jpg"
}
]
И вот как я это читаю BookDetails.js :
import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
const BookDetails = () => {
const { id } = useParams();
const [blog, setBlog] = useState({});
useEffect(() => {
const url = `/blogs.json`;
console.info(url);
fetch(url)
.then((res) => res.json())
.then((data) => {
const currentBlogArray = data.filter((book) => book.id == id);
setBlog(currentBlogArray.length > 0 ? currentBlogArray[0] : {});
});
}, []);
return (
<div className = "px-6">
<h2>This is book details: {id} </h2>
<h2 className = "flex justify-center font-bold text-2xl mb-6">
{" "}
{blog.name}
</h2>
<h2> {blog.blog}</h2>
</div>
);
};
export default BookDetails;
Замените \\n\\ на \n, чтобы добавить разрыв строки. Используйте \n\n, чтобы добавить два разрыва строки.
Вы можете добавить тег <p> для каждого необходимого места в строке, затем при чтении JSON разделить его на основе тега <p>, а затем создать свой собственный HTML.
Пример:
const json = "Paragraph 1<p>Paragraph 2";
const p = document.querySelector('#paragraph');
p.innerHTML = json.split('<p>').map(paragraph=>{
return '<p>' + paragraph + '</p>';
}).join('')
<html>
<body>
<div id = "paragraph"> </div>
</body>
</html>
import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
const BookDetails = () => {
const { id } = useParams();
const [blog, setBlog] = useState({});
useEffect(() => {
const url = `blogs.json`;
fetch(url)
.then((res) => res.json())
.then((data) => {
const currentBlogArray = data.filter((book) => book.id == id);
const currentBlog =
currentBlogArray.length > 0 ? currentBlogArray[0] : {};
setBlog({
...currentBlog,
blog: currentBlog.blog.split("\n"),
});
});
}, []);
return (
<div className = "px-6">
<h2>This is book details: {id} </h2>
<h2 className = "flex justify-center font-bold text-2xl mb-6">
{blog.name}
</h2>
<h2>
{blog.blog?.map((paragraph) => {
return (
<p>
<span style = {{ marginLeft: 25 }}></span>
{paragraph}
</p>
);
})}
</h2>
</div>
);
};
export default BookDetails;
Я его уже обновил, логика та же.
Это потрясающе! Большое спасибо! Если я хочу добавить еще немного места, например, двойной разрыв строки, как я могу этого добиться?
Есть несколько способов сделать это, один из них, например, использование маржи, я обновил. Если этот ответ подходит, примите его.
Я только что сделал javascript <h2> {blog.blog?.map((paragraph) => { return <p className = "mb-4">{paragraph}</p>; })} </h2> и вуаля! Большое спасибо за помощь еще раз
Это не проблема, есть много разных способов сделать одно и то же, просто попробуйте и сделайте это!
Заменять:
<h2> {blog.blog} </h2>
С
<h2> {blog.blog.split(/\n/).map((t,i) => (<div key = {i}>{t}</div>))} </h2>
Это разделит ваш текст на символ новой строки (отбросив его). Затем каждая результирующая подстрока преобразуется в div для отображения.
О да! Это тоже работает. Тогда я в порядке. Большое спасибо!
Спасибо. Я отредактировал свой пост, чтобы добавить больше деталей. Как я могу применить изменения, которые вы предложили в моем BookDetails.js?