Блог

Главная - Вопросы по программированию - Фигурные Скобки Javascript Вокруг Параметров

Фигурные Скобки Javascript Вокруг Параметров

#javascript #reactjs #object-destructuring

Вопрос:

Я сейчас изучаю react и javascript и изо всех сил пытаюсь понять, почему требуются фигурные скобки при передаче простой строки в функциональный компонент react, например:

 function Editor({ headerText }) {
       
    return (
        <div className="title">
            <span>{headerText}</span>
        </div>
    );
}

export default Editor;

Я понимаю концепцию деструктуризации объектов. Однако параметр headertext просто получает базовую строку. Почему я получаю синтаксические ошибки при попытке удалить фигурные скобки, если HeaderText-это просто базовая строка, поэтому ей даже не нужны фигурные скобки?

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

 function formatName(user) {
  return user.firstName   ' '   user.lastName;
}

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

Комментарии:

1. Поскольку он получает не простое строковое значение, он получает объект со headerText свойством. Поскольку это компонент React, этот объект является props параметром. Именно так и работает реакция. formatName Функция не является компонентом; она также получает объект и может быть записана formatName({ firstName, lastName }) , и вы отбросите user. внутреннюю часть функции.

2. Вы не получите синтаксических ошибок, если удалите фигурные скобки деструкции, это все еще допустимый JS(X), но во время выполнения headerText будет весь объект props.

3. да, в первом примере есть две вещи. Во-первых, вы деконструируете объект, как описывает Дейв Ньютон, называемый headertext. Во-вторых, функция возврата предоставляет JSX, и здесь вы хотите вставить переменную, для этого требуются фигурные скобки. Во втором фрагменте кода это просто логическая функция, в которой пользователя не нужно ни из чего деконструировать, а затем JSX не возвращается, поэтому переменные на данном этапе не нужно заключать в фигурные скобки для доставки JSX.

4. функция имени формата не считается компонентом react, поскольку она не возвращает синтаксис, подобный html? И все ли параметры, передаваемые компонентам реакции, считаются объектами?

Ответ №1:

Почему фигурные скобки необходимы при передаче простой строки в функциональный компонент react

Это сделано специально.

Рассмотрим, когда Editor вызывается в другом компоненте:

 function MyComponent() {
   return(
     <Editor headerText="Header"/>
   )
}

Когда React вызывает функцию редактора, она передает объект, известный как props .

Этот объект будет иметь единственную строку headerText и значение, которое было передано при вызове, однако ваш компонент не гарантирует, что переданные реквизиты имеют ТОЛЬКО это единственное значение.

Подумайте, используется ли ваш компонент таким образом

 function MyAwesomerComponent() {
   return(
    <>
    {[1,2,3,4,5].map(i=>
      <Editor key={i} env="production" headerText="Header"/>
     )}
    </>
   )
}

Ответ №2:

Для этого требуются фигурные скобки из-за того, что headerText это имя свойства объекта props. Если вы напишете его так, как <span>headerText</span> он будет отображать текст заголовка в виде буквальной строки, а не значения, переданного в качестве реквизита <Editor headerText='text value' />
примечание: рендеринг строки без кавычек технически является функцией babel, а не React, но React поставляется с babel по умолчанию, я считаю, что если бы вы не использовали babel, это был бы просто недопустимый javascript

При использовании <span>{headerText}</span> это фактически захватывает текст заголовка переменной и отображает это значение в теге span.

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

https://codesandbox.io/s/friendly-babycat-rqzo9?file=/src/Test.js

Метки: