#reactjs #filter #pagination #react-hooks
Вопрос:
Ладно, разработчики, давайте сначала разберемся с проблемой.
- Структура данных примерно такая — каждый отдельный блог будет содержать несколько тегов. (прилагается образец одних данных)
константная ссылка = процесс.ОКР.PUBLIC_URL; константные данные = [ { идентификатор: 1, теги: [ ‘техник’, ‘дизайн’, ‘виртуальной инсценировка’, ‘3D моделирование’ ], ИМГ:
${link}/vendor/images/partner.jpg
, название:'Tech', 'Design', 'Virtual Staging', '3D Modelling
аватар:${link}/vendor/images/blogger.png
, автор:Jhon Doe1
текст:We specialize in transforming photos of vacant properties into beautiful, virtually staged homes that sells faster and for top dollar.
, слизняк:${link}
дата:24 September 2019
}, - В дизайне есть несколько кнопок (отмечены красным). каждая кнопка содержит значение тега. при нажатии на кнопку вся константа данных должна быть отфильтрована и отображаться только блог, содержащий эти конкретные данные. (Ниже приведен вид дизайна)
- Кроме того, существует ограничение на разбиение на страницы внутри одной страницы и на просмотр каждой страницы.
Отфильтруйте Данные с помощью Разбиения на страницы и Ограничения просмотра Страниц.
Ответ №1:
Хорошо, я буду использовать крючки для этих задач. Давайте порежем компонент-
- Файл, содержащий все данные; (data.js)
- Компонент разбиения на страницы; (разбиение на страницы.jsx)
- Компонент блога; (blog.jsx) Наконец,
- Родительский компонент; (Index.jsx)
Давайте Начнем С Родительского компонента:
1.Нам понадобится связка крючков. Для
- Извлечение данных из блога;
const [blog, setBlog] = useState([]);
- Страницы Отслеживания;
const [page, setPage] = useState(1); //default page is 1 (First Page)
- Ограничение просмотра на страницу;
const [blogLimit, limitChange] = useState(15); // Default View Per page 15 items
Давайте погрузимся в разработку.
Во-первых, нам нужно будет получить данные после рендеринга (эффект использования).-
useEffect(() => {
blogLoading(true);
setBlog(Data); /* Data is imported from data.jsx; it contains all blogs; */
blogLoading(false); /* You can set a setTimeOut() callback function for testing the loading UI */
}, []);
Затем давайте завершим компоненты пользовательского интерфейса:
Кнопки —
<ul className="navbar-nav filter_options ml-auto mr-auto">
<li className='nav-item'>
<button type='button' onClick={() => { if (Data.length !== blog.length) {
setBlog(Data);
};
}}
className="nav-link">All</button>
</li>
{tags.map(c => <li key={c.id} className='nav-item'>
<button
type='button'
onClick={() => {
filtering(c.value)
}}
className="nav-link">{c.value}</button>
</li>)}
</ul>
Здесь теги импортируются из data.js; Когда кто-то нажмет кнопку, она выполнит функцию «фильтрация». —
const filtering = (t) => {
let rslt = [];
Data.forEach((e) => {
let value = e.tags.find((d) => {
return d === t;
});
if (value) {
return rslt.push(e);
};
});
return setBlog(rslt)
};
После этого следует разработать Ограничение на просмотр-
<div className="form-inline my-2 my-lg-0">
<div className="form_sector options">
<div className="input">
<h6>
Per Page
</h6>
</div>
<select className="styled" defaultValue={blogLimit} onChange={limit}>
<option value='5'>5</option>
<option value='15'>15</option>
<option value='25'>25</option>
</select>
</div>
Теперь функция ограничения —
const lastBlogIndex = page * blogLimit;
const firstBlogIndex = lastBlogIndex - blogLimit;
const currentBlogs = blog.slice(firstBlogIndex, lastBlogIndex);
const limit=(n)=>{
limitChange(n.target.value);
};
На основе текущего значения блогов будут отображаться блоги —
{Object.keys(currentBlogs)
.map(b => <Blogger
key={currentBlogs[b].id}
date={currentBlogs[b].date}
slug={currentBlogs[b].slug}
text={currentBlogs[b].text}
writer={currentBlogs[b].writer}
avatar={currentBlogs[b].avatar}
title={currentBlogs[b].title}
img={currentBlogs[b].img}
loading={loading}/>)}
Теперь осталось только разбиение на страницы-
<Pagination
totalBlogs={blog.length}
currentPages={page}
paginate={pageGo}
blogPerPage={blogLimit}/>
pageGo-это функция-
const pageGo = (n) => {
setPage(n);
};
наконец, давайте погрузимся в компонент разбиения на страницы (pagination.jsx), чтобы завершить задачу-
Во-первых, давайте разрушим реквизит —
const pagination = ({blogPerPage, totalBlogs, paginate, currentPages}) => {
let pageNumbers = [];
for (let i = 1; i <= Math.ceil(totalBlogs / blogPerPage); i ) {
pageNumbers.push(i);
}
Номер страницы карты на основе номеров страниц-
{pageNumbers.map(n => (
<li
key={n}
className={n === currentPages
? "page-item active"
: "page-item"}>
<button type='button' className="page-link" onClick={() => paginate(n)}>{n}</button>
</li>
))}
О кнопках «Предыдущая» и «Следующая»-
<li className={currentPages === pageNumbers.length ? "page-item disabled" : "page-item"}>
<button className="page-link arrows" type='button' onClick={() => paginate(currentPages 1)}>Next<span aria-hidden="true">
<i className="fas fa-long-arrow-alt-right"></i>
</span>
</button>
</li>
<li className={currentPages > 1 ? "page-item" : "page-item disabled" }>
<button className="page-link arrows" type='button' onClick={() => paginate(currentPages-1)} tabIndex="-1" aria-disabled="true">
<span aria-hidden="true">
<i className="fas fa-long-arrow-alt-left"></i>
</span>Previous</button>
</li>
Я надеюсь. Там Ничего Не Осталось.