Рубрики
Без рубрики

Рендеринг элементов брата в реакции с использованием фрагментов

Написано Дэнни Го Одним из преимуществ использования реагирования на рендеринг пользовательского интерфейса является то, что это … Теги с реакцией, JavaScript, WebDev.

Написано Дэнни Гуфу ✏️.

Одно из преимуществ использования реагирования на рендеринг пользовательского интерфейса состоит в том, что легко расстаться на UI на компоненты. Тем не менее, общая проблема, которая возникает, когда мы хотим вернуть брат элементы без родителей. РЕАКТ имеет функцию под названием фрагменты, которые обеспечивают решение.

Эта проблема

Если вы не знакомы с проблемой, рассмотрим этот пример.

function FAQ() {
    return (
        
Q. What is React?

        
A. A JavaScript library for building user interfaces

        
Q. How do I render sibling elements?

        
A. Use Fragments

    );
}

Этот код приводит к ошибке: Смежные элементы JSX должны быть завернуты в ограждение.

Решения

Один вариант – обернуть элементы с родительским элементом.

function FAQ() {
    return (
        

            
Q. What is React?

            
A. A JavaScript library for building user interfaces

            
Q. How do I render sibling elements?

            
A. Use Fragments

        

    );
}

Но этот метод вводит посторонний элемент в DOM, добавляя дополнительный уровень вложенности, который нам на самом деле не нужен.

Реагировать v16.0 Введен другой вариант, который должен вернуть массив элементов.

function FAQ() {
    return [
        
Q. What is React?
,
        
A. A JavaScript library for building user interfaces
,
        
Q. How do I render sibling elements?
,
        
A. Use Fragments

    ];
}

Теперь нам нужно добавить запятыми между элементами. Что еще более важно, этот код производит ключ Предупреждение: Предупреждение: каждый ребенок в списке должен иметь уникальный «ключ». Добавление ключа к каждому элементу исправляет проблему, но довольно громоздко.

function FAQ() {
    return [
        
Q. What is React?
,
        
A. A JavaScript library for building user interfaces
,
        
Q. How do I render sibling elements?
,
        
A. Use Fragments

    ];
}

Реагировать V16.2 Дал нам очистительное решение, которое является использование фрагментов.

function FAQ() {
    return (
        
            
Q. What is React?

            
A. A JavaScript library for building user interfaces

            
Q. How do I render sibling elements?

            
A. Use Fragments

        
    );
}

Мы больше не должны предоставлять ключи, нам не нужно добавлять массивные запятые, и мы все еще избегаем добавления постороннего элемента DOM, потому что Реагировать. Фрагмент не становится реальным элементом во время рендеринга.

Мы можем импортировать Фрагмент Чтобы избежать необходимости полностью выписать Реагировать. Фрагмент Отказ

import React, {Fragment} from "react";

function FAQ() {
    return (
        
            
Q. What is React?

            
A. A JavaScript library for building user interfaces

            
Q. How do I render sibling elements?

            
A. Use Fragments

        
    );
}

Тем не менее, еще лучший метод состоит в том, чтобы использовать Slowhand Syntax для фрагментов, который выглядит как пустые теги: <> и Отказ

function FAQ() {
    return (
        <>
            
Q. What is React?

            
A. A JavaScript library for building user interfaces

            
Q. How do I render sibling elements?

            
A. Use Fragments

        
    );
}

Это дает нам те же преимущества, что и использование Реагировать. Фрагмент , но нам не нужно импортировать что-либо еще, и наш код выглядит очистителем.

Единственное, что Shorthand Syntax не поддерживает сейчас, добавляет ключ Отказ Это может быть проблематично, если вы создаете Описание Список , Например. В этом случае используйте стандартный синтаксис.

function Dictionary(props) {
    return (
        

            {props.terms.map(({word, definition}) => 
                
                    
{word}

                    
{definition}

                
            )}
        

    );
}

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

Однако в большинстве случаев метод сокращения является лучшим решением для нашей оригинальной проблемы возврата элементов брата. Это решение разработало достаточно хорошо, что Vue.js также будет в сопоставлении поддержки концепции фрагментов Когда V3 выпущен .

Используя фрагменты

За последние два года экосистема JavaScript добавила широко распространенную поддержку фрагментов.

Если вы обновляете свои зависимости, вы, вероятно, сможете использовать фрагменты без какой-либо дополнительной конфигурации.

Примечание редактора: Видеть что-то не так с этим постом? Вы можете найти правильную версию здесь Отказ

Plug: Logrocket, DVR для веб-приложений

Logrocket Это инструмент для ведения журнала Frontend, который позволяет вам повторить проблемы, как если бы они произошли в вашем браузере. Вместо того, чтобы угадать, почему случаются ошибки, или просят пользователей на скриншоты и журнал свалки, Lognocket позволяет воспроизвести сеанс, чтобы быстро понять, что пошло не так. Он отлично работает с любым приложением, независимо от основ и имеет плагины для регистрации дополнительного контекста из Redux, Vuex и @ Ngrx/Store. В дополнение к регистрации действий и состояния Redux, Lognocket Records Console Logs, ошибки JavaScript, Stacktraces, Networks/Ответы с заголовками + тел, метаданные браузера и пользовательские журналы. Он также привлекает инструменты DOM для записи HTML и CSS на странице, воссоздая Pixel-Perfect видео даже самых сложных одностраничных приложений. Попробуйте бесплатно Отказ

Пост Рендеринг элементов брата в реакции с использованием фрагментов появился первым на Logocket blog Отказ

Оригинал: “https://dev.to/bnevilleoneill/rendering-sibling-elements-in-react-using-fragments-1fmp”

Читайте ещё по теме: