Реакция на большую энергию Div

React делает создание сложных интерактивных приложений относительно безболезненным процессом. Это достигается за счет отхода от императивного программирования, используемого в ванильном JavaScript, которое требует от разработчиков указывать JavaScript, что и как отображать. React использует декларативное программирование для обработки «как» рендеринга под капотом, что позволяет разработчикам сосредоточиться на том, что приложение может делать.

Однако, как и за большинство хороших вещей, за удобство React приходится платить, и эта цена — педантичность. React требует от разработчиков соблюдения высоких синтаксических стандартов, а в обмен делает грязную работу на стороне DOM. Если стандарты не соблюдаются, React сообщает об этом, выдавая ошибку. Рассмотрим пример ниже:

function MyBrokenComponent() {
    return (
        <h1>Beware!</h1>
        <p>I will return an error</p>
    )
}
Вход в полноэкранный режим Выйти из полноэкранного режима

В этом примере мы говорим React вернуть элемент h1 и элемент p, когда MyBrokenComponent отображается его родительским компонентом. Это приведет к следующей ошибке:

Эта ошибка говорит нам о том, что React не может отрисовать компонент с более чем одним родительским элементом. Мы получаем эту ошибку, потому что React требует, чтобы операторы возврата были обернуты в родительский элемент, а приведенный выше оператор возврата не соответствует этому требованию. Давайте рассмотрим другой пример:

function MyOtherBrokenComponent() {
    return (
        <p>Try again!</p>
        <p>I will also return an error</p>
    )
}
Вход в полноэкранный режим Выйти из полноэкранного режима

Этот пример приведет к той же синтаксической ошибке, что и наш предыдущий пример. Хотя наш оператор return содержит только один тип элемента, p, он все равно содержит два элемента и, таким образом, не соответствует стандарту React «один родитель». Давайте рассмотрим пример, который не возвращает ошибку:

function MyWorkingComponent() {
    return (
        <div>
            <h1>You're in the clear!</h1>
            <p>I will not return an error</p>
        </div>
    )
}
Вход в полноэкранный режим Выход из полноэкранного режима

При сравнении нашего компонента без ошибок с предыдущими примерами видно, что MyWorkingComponent имеет то, чего не хватает остальным: один родительский элемент. В данном случае, как и во многих других, родительским элементом является div. Обертывание элементов в один родительский элемент позволяет React понять смысл наших декларативных утверждений, а использование div позволяет разработчикам убедиться, что синтаксические потребности React выполняются.

Хотя div являются полезным инструментом для исправления синтаксиса, это не единственный инструмент в нашем распоряжении. Рассмотрим два примера ниже:

function MyDivlessComponent() {  
    return <p>I will not return an error either!</p>
}
Вход в полноэкранный режим Выход из полноэкранного режима
function MyHappyComponent() {
    <div>
        <h1>Divs</h1>
        <h2>keep</h2>
        <p>React</p>
        <p>happy!</p>
    </div>
}
Войти в полноэкранный режим Выход из полноэкранного режима

Наш первый компонент, MyDivlessComponent, имеет рабочий оператор возврата, но не имеет div. Как это может быть? Ну, div — это всего лишь один из примеров родительского компонента. Ключ к соблюдению строгих правил синтаксиса React заключается в том, чтобы все в операторе возврата содержалось в одном блоке, или родительском элементе. В случае с MyDivlessComponent нашим родительским элементом является элемент p без каких-либо дочерних элементов. С другой стороны, MyHappyComponent содержит 4 дочерних элемента и, следовательно, требует родительского элемента, который должен быть обернут вокруг этих дочерних элементов.

Изучение особенностей нового фреймворка может быть сложным, но div дают разработчикам возможность легко исправить одну из самых распространенных ошибок React.

Оцените статью
devanswers.ru
Добавить комментарий