Создайте React Subcomponents простым способом!

Привет, ребята, Если вы работаете в React и использовали библиотеки, такие как React Bootstrap Вы, должно быть, видели или использовали такие компоненты, как <Выпадающий. Пункт> Анкет Вы когда -нибудь задумывались, как создать такие компоненты? В этой статье мы поймем создание компонентов, которые имеют свои собственные модули или подкомпоненты, как и выше Выпадающий составная часть.

Примечание : Если есть какое -либо конкретное имя или жаргон для подкомпонентов, пожалуйста, дайте мне знать, что в комментариях ниже.

Для этого урока мы будем создавать очень простой компонент карты. Это будет иметь заголовок, тело и нижний колонтитул в качестве подмодулей. Для учебного пособия я держу эту компонент этой карты очень простым и не добавляю в нее какую -либо сложную функциональность. В практическом мире вы можете добавить все другие функции, как и любой другой компонент в React. Хотя этот урок использует простые ReactJS, вы также можете использовать ту же структуру компонентов и для приложений, связанных с реагированием.

Компонент карты, который мы будем создавать, будет выглядеть примерно так –

Теперь давайте сначала посмотрим код и лучше поймем его структуру. Ниже приведен код, который мы использовали для создания вышеуказанного компонента.

import React from 'react';

const Card = ({ children }) => {
    let subComponentList = Object.keys(Card);

    let subComponents = subComponentList.map((key) => {
        return React.Children.map(children, (child) =>
            child.type.name === key ? child : null
        );
    });

    return (
        <>
            

                {subComponents.map((component) => component)}
            
        
    );
};

const Header = (props) => 
{props.children}
;
Card.Header = Header;

const Body = (props) => 
{props.children}
;
Card.Body = Body;

const Footer = (props) => 
{props.children}
;
Card.Footer = Footer;

export default Card;

Как вы можете видеть, в приведенном выше коде мы рассматриваем компонент карты как просто еще один объект – JavaScript. Наши подкомпоненты, заголовок, тело и нижний колонтитул передаются в компонент карты в качестве ключей.

Следовательно, внутри карты мы сначала создадим список всех клавиш, то есть подкомпоненты для карты. Таким образом, мы можем добавить столько подкомпонентов, сколько хотим.

После получения списка подкомпонентов все, что нам требуется, – это представить их через карту. Здесь мы будем использовать Реагировать. Дети API от React. Реагировать. Дети предоставляют утилиту для решения непрозрачных структур данных, которые есть у детей. Если детская опора является массивом, он вернет функцию для каждого ребенка в массиве. Если ребенок NULL или неопределенный , этот метод вернется NULL или неопределенный .

Элемент DIV внутри оператора возврата используется для добавления стиля на карту, и внутри этого Div мы просто возвращаем все подкомпоненты. Мы также можем добавить к этому больше функциональных возможностей в соответствии с нашими требованиями.

Таким образом, вы можете создать любой компонент со многими подкомпонентами или модулями внутри него. Несмотря на то, что легко создать один компонент и добавить все функциональные возможности подкомпонента, но создание компонентов таким образом добавит гораздо более читабельность в код. Таким образом, в зависимости от использования, мы можем использовать этот шаблон в наших приложениях.

Если вы когда -либо пытались создать подобные подкомпоненты или почувствовать, что это можно сделать лучше, поделитесь со мной своими подходами в комментариях!

И ваши отзывы о статье будут приветствоваться, всегда !! Продолжай учиться!

Оригинал: “https://dev.to/ms_yogii/create-react-subcomponents-in-a-simple-way-5h1f”