Розв'язання проблем з відображенням декількох дочірніх елементів компонента

Розв’язання проблем з відображенням декількох дочірніх елементів компонента

7 Березня 2024 в 16:25 19

У світі веб-розробки існує безліч інструментів і технологій, які дозволяють створювати вражаючі та функціональні веб-додатки. Один із найпопулярніших засобів для розробки веб-інтерфейсів – це бібліотека React. React відкриває перед розробниками безмежні можливості для створення складних та ефективних веб-додатків.

Проте, навіть досвідчені розробники можуть зіткнутися з різними проблемами під час роботи з React. Однією з таких проблем є відображення декількох дочірніх елементів у компоненті. Давайте розглянемо цю проблему докладніше.

Проблема

Одним із розповсюджених сценаріїв використання React є створення навігаційної панелі або меню для веб-додатку. Ця панель зазвичай містить кілька пунктів меню, кожен з яких може мати свій власний текст та значок. Проте, коли розробник намагається відобразити як текст, так і значок для кожного пункту меню, можуть виникнути проблеми.

Зазначена проблема полягає в тому, що під час додавання тексту до пункту меню значок може зникати або неправильно відображатися. Це може призвести до того, що користувач не отримає очікуваного вигляду навігаційної панелі, або ж пункти меню можуть стати неклікабельними або нерозпізнаваними.

Можливе рішення

Щоб вирішити цю проблему, ми можемо скористатися деякими техніками та підходами, які надає React. Одним із можливих рішень є використання компонентів вищого порядку (HOC), щоб обгорнути наш компонент навігаційної панелі та розробити спеціальний компонент, який буде відповідальний за відображення тексту та значка разом.

Нижче наведено код прикладу, який ілюструє можливий підхід до вирішення даної проблеми:


Navbar.jsx
import { CustomNavLink } from "./CustomNavLink";
import "./Navbar.css";
import { useId } from "react";
export function Navbar () {
    const navCategories = [
        {
            id: useId(),
            to: "/",
            text: "Про мене",
        },
        {
            id: useId(),
            to: "/skills",
            text: "Навички",
        },
        {
            id: useId(),
            to: "/work",
            text: "Проекти",
        },
        {
            id: useId(),
            to: "/contact",
            text: "Контакт",
        },
    ]
    return &lt;&gt;
        &lt;header className="col-3"&gt;
            &lt;div className="title"&gt;
                &lt;h1&gt;Title&lt;/h1&gt;
                &lt;h2 className="fs-5"&gt;Subtitle&lt;/h2&gt;
            &lt;/div&gt;
            &lt;nav className="navbar"&gt;
                &lt;ul&gt;
                    {
                        navCategories.map(navCategory => (
                            &lt;li id={navCategory.id} key={navCategory.id}&gt;
                                &lt;CustomNavLink to={navCategory.to} inActiveIcon=&#123;&lt;i className="fa-solid fa-chevron-right"&gt;&lt;/i&gt;&#125; activeIcon=&#123;&lt;i className="fa-solid fa-chevron-down"&gt;&lt;/i&gt;&#125; text={navCategory.text} /&gt;
                            &lt;/li&gt;
                        ))
                    }
                &lt;/ul&gt;
            &lt;/nav&gt;
        &lt;/header&gt;
    &lt;/&gt;
}
CustomNavLink.jsx
import { NavLink } from "react-router-dom";
export function CustomNavLink (&#123; to, activeIcon, inActiveIcon, text &#125;) {
    return (
    &lt;NavLink to=&#123;to&#125;&gt;
        &#123;(&#123; isActive &#125;) =&gt; isActive ? activeIcon && text : inActiveIcon && text&#125;
    &lt;/NavLink&gt;
    );
};

Navbar.jsx

import { CustomNavLink } from "./CustomNavLink";

import "./Navbar.css";

import { useId } from "react";

export function Navbar () {

const navCategories = [

{

id: useId(),

to: "/",

text: "Про мене",

{

id: useId(),

to: "/skills",

text: "Навички",

{

id: useId(),

to: "/work",

text: "Проекти",

{

id: useId(),

to: "/contact",

text: "Контакт",

]

return <>

<h1>Title</h1>

<h2 className="fs-5">Subtitle</h2>

</div>

<ul>

{

navCategories.map(navCategory => (

<CustomNavLink to={navCategory.to} inActiveIcon={<i className="fa-solid fa-chevron-right"></i>} activeIcon={<i className="fa-solid fa-chevron-down"></i>} text={navCategory.text} />

</li>

))

}

</ul>

</nav>

</header>

</>

}

CustomNavLink.jsx

import { NavLink } from "react-router-dom";

export function CustomNavLink ({ to, activeIcon, inActiveIcon, text }) {

return (

{({ isActive }) => isActive ? activeIcon && text : inActiveIcon && text}

</NavLink>

);

};

В даному прикладі ми використовуємо компонент CustomNavLink для створення наших посилань на навігаційні пункти. Цей компонент відповідає за відображення тексту та значка залежно від активності сторінки.

Загальний підхід полягає в тому, щоб обгорнути посилання у компонент вищого порядку (HOC), який відслідковує активну сторінку та забезпечує відображення відповідного значка. Таким чином, ми можемо успішно відображати як текст, так і значок для кожного пункту меню без втрати функціональності чи вигляду.

Висновок

Вирішення проблеми з відображенням декількох дочірніх елементів компонента у React може бути складною задачею, але застосування правильних підходів та технік може допомогти забезпечити правильне відображення вашого інтерфейсу. Використання компонентів вищого порядку та ретельне планування архітектури вашого додатку може спростити розв’язання цієї проблеми та забезпечити його ефективність та надійність.