13
Сен
2021

Как вывести компоненты в react по сравнению?

изучаю реакт и хотел бы помощи у вас попросить...

Имею два div (navbar) и в одном div имею ссылки с data-slug,а в другом div имею блоки, которые тоже привязаны к data-slug. Суть в том, что я хочу сделать сравнение эти data-slug и вывести блоки, которые между собой одинаково названы. На данный момент у меня активны 3 блока сразу и...вывод в общем - статичный. Хотелось бы понять, как это делается (если можно, то с примерами).

function SubItems(props) {
    
    return (
    <div className={`${styles.header__nav_item} ${props.hover ? 'header__submenu_inner_active' : ''}`} data-slug={`${"slug-"}${props.slug}`}>
        <div className={styles.header__submenu_col}>
            <div className={styles.header__submenu_item}>
                <div className={styles.header__submenu_title}>
                    <div>{props.subtitle}</div>
                </div>
                <div className={styles.header__submenu_list}>
                    <div className={styles.header__submenu_list_item}>
                        <a className={styles.header__submenu_list_link} href="/ministerstvo/o-ministerstve/obschie-svedeniya/">
                            Общие сведения
                        </a>
                    </div>
                    <div className={styles.header__submenu_list_item}>
                        <a className={styles.header__submenu_list_link} href="/ministerstvo/o-ministerstve/obschie-svedeniya/">
                            Общие сведения
                        </a>
                    </div>
                    <div className={styles.header__submenu_list_item}>
                        <a className={styles.header__submenu_list_link} href="/ministerstvo/o-ministerstve/obschie-svedeniya/">
                            Общие сведения
                        </a>
                    </div>
                    <div className={styles.header__submenu_list_item}>
                        <a className={styles.header__submenu_list_link} href="/ministerstvo/o-ministerstve/obschie-svedeniya/">
                            Общие сведения
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    );
} export default SubItems;

function NavItem(props) {
    const [hovered, setHovered] = useState(false);
    const toggleHover = () => setHovered(!hovered);
    return (
        <div className={`${styles.header__nav_item} ${hovered ? `${styles.header__nav_item_active}` : ''}`} onMouseEnter={toggleHover} onMouseLeave={toggleHover}>
            <a className = {styles.header__nav_link}  href = {props.url} data-slug = {`${"slug-"}${props.slug}`} >
                {props.title}
            </a>
        </div>
    );

} export default NavItem;

import styles from './Nav.module.scss';
import NavItem from "./navItems";
import React, { useState, useEffect } from 'react';
import SubItems from './SubItems';
import userEvent from '@testing-library/user-event';


function Navigation(props) {

    const [hovered, setHovered] = useState(false);

    const toggleHover = () => setHovered(!hovered);
    const Slug =
        [
            { title: "Министерство", dataSlug: "ministerstvo", url: 'yandex.ru',subtitle: "O министерстве " },
            { title: "Документы", dataSlug: "documenty", url: 'mail.ru', subtitle: "О документах" },
            { title: "Прочее", dataSlug: "prochee", url: 'google.ru', subtitle: "О прочее" }
        ]

    return (
        <div className={`${styles.header} ${hovered ? `${styles.header_is_submenu}` : ''}`} onMouseEnter={toggleHover} onMouseLeave={toggleHover}>
            <div className={styles.header__nav}>
                <div className={styles.wrapper}>
                    <div className={styles.header__nav_inner}>
                        <div className={styles.header__nav_list}>
                            {Slug.map((item) =>
                                <NavItem
                                    title={item.title}
                                    slug={item.dataSlug}
                                    url={item.url}
                                    hovered={hovered}
                                />
                            )}
                        </div>
                    </div>
                </div>
            </div>
            <div className={styles.header__subnav}>
                <div className={styles.header__submenu}>
                    <div className={styles.wrapper}>
                        {Slug.map((block) =>
                            <SubItems
                                subtitle={block.subtitle}
                                slug={block.dataSlug}
                                hovered={hovered}
                            />
                        )}
                    </div>
                </div>
            </div>
        </div>
    );
}
export default Navigation;

Источник: https://ru.stackoverflow.com/questions/1327977/%D0%9A%D0%B0%D0%BA-%D0%B2%D1%8B%D0%B2%D0%B5%D1%81%D1%82%D0%B8-%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D1%8B-%D0%B2-react-%D0%BF%D0%BE-%D1%81%D1%80%D0%B0%D0%B2%D0%BD%D0%B5%D0%BD%D0%B8%D1%8E

Тебе может это понравится...

Добавить комментарий