JavaScript в фигурных скобках в JSX в React компонентах

Содержание туториала по React JSX позволяет вам писать HTML-подобную разметку внутри файла JavaScript, сохраняя логику рендеринга и содержимое в одном месте. Иногда вам может понадобиться добавить немного логики JavaScript или сослаться на динамическое свойство внутри этой разметки. В этой ситуации вы можете использовать фигурные скобки в JSX, чтобы добавить в них JavaScript.

Передача строк в кавычках

Когда нужно передать строковый атрибут в JSX, нужно заключить его в одинарные или двойные кавычки:

export default function Avatar() {
  return (
    <img
      className="avatar"
      src="http://example.com/userpic.jpg"
      alt="User Name"
    />
  );
}

Здесь "http://example.com/userpic.jpg" и "User Name" передаются как строки. Но что, если вы хотите динамически указать src или alt? Вы можете использовать JavaScript значение, заменив " и " на { и }:

export default function Avatar() {
  const avatar = 'http://example.com/userpic.jpg';
  const description = 'User Name';
  return <img className="avatar" src={avatar} alt={description} />;
}

Обратите внимание на разницу между className="avatar", который указывает имя CSS класса "avatar", и src={avatar}, который считывает значение переменной JavaScript с именем avatar. Это потому, что фигурные скобки позволяют вам работать с JavaScript прямо в разметке.

Использование фигурных скобок: JavaScript в разметке

JSX — это особый способ написания JavaScript. Это означает, что внутри него можно использовать JavaScript — с помощью фигурных скобок { }. В приведенном ниже примере сначала объявляется имя, name, а затем оно встраивается в фигурные скобки внутри <h1>:

export default function TodoList() {
  const name = 'User Name';

  return <h1>{name}'s To Do List</h1>;
}

Любое выражение JavaScript будет работать между фигурными скобками, включая вызовы функций, таких как formatDate():

const today = new Date();

function formatDate(date) {
  return new Intl.DateTimeFormat('en-US', { weekday: 'long' }).format(date);
}

export default function TodoList() {
  return <h1>To Do List for {formatDate(today)}</h1>;
}

Где использовать фигурные скобки

Вы можете использовать фигурные скобки только двумя способами внутри JSX:

1. Как текст непосредственно внутри тега JSX: <h1>{name}'s To Do List</h1> работает, но <{tag}>To Do List</{tag}> работать не будет.
2. Поскольку атрибуты следуют сразу после знака =: src={avatar} будут считывать переменную avatar, но src="{avatar}" передаст строку "{avatar}".

Использование двойных фигурных скобок: CSS и другие объекты в JSX

Помимо строк, чисел и других выражений JavaScript, вы даже можете передавать объекты в JSX. Объекты также обозначаются фигурными скобками, например { name: "User Name", itemsCount: 10 }. Следовательно, чтобы передать объект JS в JSX, вы должны заключить объект в другую пару фигурных скобок: person={{ name: "User Name", itemsCount: 10 }}. Вы можете увидеть это со встроенными стилями CSS в JSX. React не требует от вас использования встроенных стилей (классы CSS отлично подходят для большинства случаев). Но когда вам нужен встроенный стиль, нужно передать объект атрибуту стиля:

export default function TodoList() {
  return (
    <ul
      style={{
        backgroundColor: 'black',
        color: 'pink',
      }}
    >
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  );
}

Встроенные (inline) стили записываются в camelCase. Например, HTML <ul style="background-color: black"> в компоненте будет записан как <ul style={{ backgroundColor: 'black' }}>.

Другие примеры JavaScript объектов в фигурных скобках

Вы можете переместить несколько выражений в один объект и ссылаться на них в JSX внутри фигурных скобок:

const person = {
  name: 'User Name',
  theme: {
    backgroundColor: 'black',
    color: 'pink',
  },
};

export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>{person.name}'s Todos</h1>
      <img
        className="avatar"
        src="https://example.com/userpic.jpg"
        alt="userpic"
      />
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </div>
  );
}

В этом примере объект JavaScript person содержит строку имени и объект темы:

const person = {
  name: 'User Name',
  theme: {
    backgroundColor: 'black',
    color: 'pink',
  },
};

Компонент может использовать эти значения из person следующим образом:

<div style={person.theme}>
  <h1>{person.name}'s Todos</h1>

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

Резюме

Теперь вы знаете почти все о JSX:

• Атрибуты JSX внутри кавычек передаются как строки.
• Фигурные скобки позволяют добавить в разметку логику и JavaScript переменные.
• Они работают внутри содержимого тега JSX или сразу после = в атрибутах.
• {{ и }} не являются специальным синтаксисом: это объект JavaScript, спрятанный внутри фигурных скобок JSX.

Серия статей о React Router v6 состоит из 4 частей.

1. Основы React Router
2. Продвинутые определения маршрутов
3. Управление навигацией (рассматривается в этой статье)
4. Подробно о роутерах

В этой статье рассмотрим следующие темы.

1. Навигация по ссылкам
2. Ручная навигация
3. Передача данных при навигации

Навигация по ссылкам

Навигация по ссылкам - это самая простая и распространенная форма навигации. Мы уже видели самую простую форму навигации по ссылкам с помощью компонента Link.

<Link to="/">Home</Link>
<Link to="/books">Books</Link>

Однако эти компоненты Link могут стать немного сложнее. Например, у вас могут быть абсолютные ссылки, подобные приведенным выше ссылкам, или у вас могут быть ссылки, относящиеся к текущему отображаемому компоненту.

<Link to="/">Home</Link>
<Link to="../">Back</Link>
<Link to="edit">Edit</Link>

Например, представьте, что мы находимся в маршруте /books/3 с приведенными выше ссылками. Первая ссылка приведет к / маршруту, так как это абсолютный маршрут. Любой маршрут, начинающийся с /, является абсолютным маршрутом. Вторая ссылка приведет к маршруту /books, так как это относительная ссылка, которая поднимается на один уровень вверх от /books/3 к /books. Наконец, наша третья ссылка перейдет на страницу /books/3/edit, так как она добавит путь к пропсу to в конец текущей ссылки, поскольку это относительная ссылка.

Помимо пропса to, есть также 3 других пропса, которые важны для компонента Link.

replace

Проп replace имеет логическое значение, которое, если установить в true, приведет к тому, что эта ссылка заменит текущую страницу в истории браузера. Представьте, что у вас есть следующая история браузера.

/
/books
/books/3

Если вы нажмете на ссылку, ведущую на страницу /books/3/edit, но у нее проп replace имеет значение `trueё, ваша новая история будет выглядеть следующим образом.

/
/books
/books/3/edit

Страница, на которой вы находились в данный момент, была заменена новой страницей. Это означает, что если вы нажмете кнопку «Назад» на новой странице, вы вернетесь на страницу /books, а не на страницу /books/3.

reloadDocument

Проп reloadDocument также является логическим. Если задано значение true, компонент Link будет действовать как обычный тег <a> и выполнять полное обновление страницы при навигации вместо того, чтобы просто повторно отображать содержимое внутри компонента Routes.

state

Финальный проп называется state. Этот проп позволяет передавать данные вместе с Link, которая не отображается нигде в URL-адресе. Рассмотрим эту возможность более подробно, когда будем говорить о навигационных данных.

NavLink

Компонент NavLink работает точно так же, как компонент Link, но он предназначен специально для отображения активных состояний ссылок, например, в панелях навигации. По умолчанию, если проп to у NavLink совпадает с URL-адресом текущей страницы, к ссылке будет добавлен класс active, который можно использовать для стилизации. Если этого недостаточно, можно передать функцию с параметром isActive в className, или в свойства style, или в качестве дочерних элементов NavLink.

<NavLink
  to="/"
  style={({ isActive }) => ({ color: isActive ? "red" : "black" })}
>
  Home
</NavLink>

Еще NavLink имеет проп end, который используется для помощи во вложенной маршрутизации. Например, если мы находимся на странице /books/3, это означает, что мы визуализируем компонент Book, который вложен в наш маршрут /books. Это означает, что если у нас есть NavLink с to установленным в /books, он будет считаться активным. Это связано с тем, что NavLink считается активным, если URL-адрес to совпадает с пропсом to NavLink или если текущий Route находится внутри родительского компонента c path, который совпадает с пропсом to компонента NavLink. Если вы не хотите такое поведение по умолчанию, вы можете установить проп end в true, чтобы URL-адрес страницы точно соответствовал пропсу to NavLink.

Ручная навигация

Иногда нужно вручную перемещаться на основе таких вещей, как отправка формы или отсутствие доступа к определенной странице. Для таких случаев можно использовать либо компонент Navigate, либо хук useNavigation.

Компонент Navigate

Компонент Navigate — это очень простой компонент, который при визуализации автоматически перенаправляет пользователя на значение пропса to компонента.

<Navigate to="/" />

Компонент Navigate имеет те же пропсы, что и компонент Link, таким образом вы можете передать ему to, replace и state.

Хук useNavigation

Хук useNavigation представляет собой хук, который не принимает никаких параметров и возвращает одну функцию navigate, которую вы можете использовать для перенаправления пользователя на определенные страницы. Эта функция navigate принимает два параметра. Первый параметр — это местоположение to, в которое вы хотите перенаправить пользователя, а второй параметр — это объект, который может иметь ключи для replace и state.

const navigate = useNavigate()

function onSubmit() {
  // Отправка значения формы
  navigate("/books", { replace: true, state: { bookName: "Fake Title" }})
}

Приведенный выше код перенаправит пользователя на маршрут /books. Он также заменит текущий маршрут в истории и передаст некоторую информацию через state. Другой способ, которым вы можете использовать функцию navigate, — передать ей число. Это позволит вам имитировать нажатие кнопки вперед/назад.

navigate(-1) // Перемещает назад на одну страницу в истории
navigate(-3) // Перемещает назад на три страницу в истории
navigate(1) // Перемещает вперед на одну страницу в истории

Передача данных при навигации

Наконец, пришло время поговорить о передаче данных между страницами. Существует 3 основных способа передачи данных между страницами.

1. Динамические параметры
2. Параметры поиска
3. Данные состояния/местоположения

Динамические параметры

Мы уже говорили о том, как использовать динамические параметры в URL-адресах с помощью хука useParams. Это лучший способ обработки передаваемой информации, такой как идентификаторы.

Параметры поиска

Параметры поиска — это все параметры, которые идут после ? в URL-адресе (?name=Kyle&age=27). Для работы с параметрами поиска необходимо использовать хук useSearchParams, который работает очень похоже на useState.

import { useSearchParams } from "react-router-dom"

export function SearchExample() {
  const [searchParams, setSearchParams] = useSearchParams({ n: 3 })
  const number = searchParams.get("n")

  return (
    <>
      <h1>{number}</h1>
      <input
        type="number"
        value={number}
        onChange={e => setSearchParams({ n: e.target.value })}
      />
    </>
  )
}

В этом примере у нас есть инпут, который по мере ввода будет обновлять поисковую часть нашего URL-адреса. Например, если наш ввод имеет значение 32, наш URL-адрес будет выглядеть так: http://localhost:3000?n=32. Хук useSearchParams принимает начальное значение, как useState, и в нашем случае наше начальное значение n равно 3. Затем этот хук возвращает два значения. Первое значение - это все наши параметры поиска, а второе значение - это функция для обновления наших параметров поиска. Функция set просто принимает один аргумент, который является новым значением параметров поиска. Однако первое значение, содержащее параметры поиска, немного более запутанно. Это связано с тем, что это значение относится к типу URLSearchParams. Вот почему нам нужно использовать синтаксис .get в строке 5 выше.

Данные состояния/местоположения

Вся эта информация в этом случае будет доступна через хук useLocation. Использовать этот хук очень просто, так как он возвращает одно значение и не принимает никаких параметров.

const location = useLocation()

Если у нас есть следующий URL http://localhost/books?n=32#id то возвращаемое значение useLocation будет выглядеть следующим образом.

{
  pathname: "/books",
  search: "?n=32",
  hash: "#id",
  key: "2JH3G3S",
  state: null
}

Этот объект местоположения содержит всю информацию, относящуюся к нашему URL-адресу. Он также содержит уникальный ключ, который можно использовать для кэширования, если вы хотите кэшировать информацию, когда пользователь нажимает кнопку «Назад», чтобы вернуться на страницу. Вы также заметите, что у нас есть проп state, возвращаемое из useLocation. Эти данные состояния могут быть любыми и передаются между страницами без сохранения в URL-адресе. Например, если вы нажмете на Link, которая выглядит следующим образом:

<Link to="/books" state={{ name: "Kyle" }}>

тогда значение состояния в объекте location будет установлено в { name: "Kyle" }. Это может быть очень полезно, если, например, вы хотите отправлять простые сообщения между страницами, которые не должны храниться в URL-адресе. Хорошим примером этого может быть что-то вроде сообщения об успешном завершении, которое отправляется на страницу, на которую вы перенаправляетесь после создания новой книги.