Блог

Ладно, разработчики, давайте сначала разберемся с проблемой.

1. Структура данных примерно такая — каждый отдельный блог будет содержать несколько тегов. (прилагается образец одних данных)

   константная ссылка = процесс.ОКР.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 },

2. В дизайне есть несколько кнопок (отмечены красным). каждая кнопка содержит значение тега. при нажатии на кнопку вся константа данных должна быть отфильтрована и отображаться только блог, содержащий эти конкретные данные. (Ниже приведен вид дизайна)

3. Кроме того, существует ограничение на разбиение на страницы внутри одной страницы и на просмотр каждой страницы.

Отфильтруйте Данные с помощью Разбиения на страницы и Ограничения просмотра Страниц.

Хорошо, я буду использовать крючки для этих задач. Давайте порежем компонент-

1. Файл, содержащий все данные; (data.js)
2. Компонент разбиения на страницы; (разбиение на страницы.jsx)
3. Компонент блога; (blog.jsx) Наконец,
4. Родительский компонент; (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>
 

Я надеюсь. Там Ничего Не Осталось.

Чтобы проверить Полный Проект-Репозиторий GitHub