Что представляют доллар и двоеточие в React?

Что означают двоеточие и доллар, приведенные ниже, в React?

Пример двоеточия:

Пример для доллара (он используется прямо перед выражением, но почему):


reactjs path react-router-v4 colon
person Azan Momin    schedule 26.02.2018    source источник
comment
Большое спасибо, ребята, концепция доллара ясна. Цените вашу помощь. :-) Сказав, что в первом примере я удалил двоеточие из URL-адреса и обнаружил, что компонент не отображается, хотя URL-адрес изменяется должным образом. Просто добавлю, что здесь я использую API, а контент извлекается из внешнего источника themoviedb.org. Имеет ли двоеточие какое-либо конкретное назначение, когда речь идет о внешнем\внутреннем ресурсе?   -  person Azan Momin    schedule 26.02.2018
comment
двоеточие является параметром. вы читаете документы? reacttraining.com/react-router/web/example/url-params   -  person azium    schedule 26.02.2018
comment
Я просматривал документы с reactjs.org. Большое спасибо за вашу помощь, а также URL-адрес для справки. Это очень помогло. Ценить это. :-)   -  person Azan Momin    schedule 27.02.2018

Ответы (5)


arrow_upward
10
arrow_downward

$ не реагирует. Но его функция ES6, называемая литералами шаблонов, подробнее представлена ​​в Литералы шаблонов. базовые или литералы шаблонов.

В реакции у вас есть компоненты маршрута и ссылки в модуле маршрутизатора реакции.

Маршрут принимает два свойства: path and component. Когда путь соответствует пути, указанному для компонента, он вернет указанный компонент.

В вашем маршруте вы говорите, что он соответствует любому пути, который имеет фильм/любой идентификатор, что означает, что он переходит к указанному компоненту (здесь фильм) с заданным параметром

Ссылка используется для указания, по какому пути идти. Это просто оболочка тега <a>, которая помогает перейти к указанному пути, а в вашем текущем примере — к /movie/1 (при условии, что this.state.movies[index].id равен 1)

person G_S    schedule 26.02.2018

arrow_upward
4
arrow_downward

Ну, это функция JavaScript ES6,

Как вы понимаете, до ES6 вы могли сделать что-то вроде:

var user = 'xyz' + newuser;

ES6:

var user = `xyz${newuser}`;

Литералы шаблонов заключаются в обратную галочку (``). Литералы шаблонов могут содержать заполнители. Они обозначены знаком доллара и фигурными скобками (${expression}).

Подробнее о шаблонных литералах в Mozilla можно узнать.

person Aaqib    schedule 26.02.2018

arrow_upward
2
arrow_downward

Я тоже потратил целую вечность, пытаясь выяснить, как работает толстая кишка. Довольно неприятно пытаться перепроектировать примеры, а не объяснять это в разделе API.

Сказав это, в документации есть подсказка https://reacttraining.com/react-router/core/api/Route, где говорится, что путь принимает «любой действительный URL-адрес или массив путей, который понимает path-to-regexp@^1.7.0». Если вы посмотрите документацию для пути к регулярному выражению, вы увидите, что «Именованные параметры определяются путем добавления двоеточия к имени параметра... По умолчанию параметр будет соответствовать до следующего сегмента пути»

Затем вы можете посмотреть https://reacttraining.com/react-router/core/api/match, в котором объясняется, как получить объект match и как извлечь из него параметры.

person Andy    schedule 15.04.2020

arrow_upward
0
arrow_downward

Доллар — это синтаксис es6 для использования переменных в строках.

person Lucas Charvolin    schedule 26.02.2018

arrow_upward
0
arrow_downward

В данном случае : является частью синтаксиса path-to-regexp, используемого React Router (и Express) для путей; он позволяет указать параметр. Это имеет два значения.

  1. Чтобы соответствовать нескольким URL-адресам.
<Route path='/app/:page'>

Будет соответствовать любому /app/, за которым следует что угодно. Обратите внимание, что здесь есть гибкие типы соответствия, но они не совсем типичные регулярные выражения: https://github.com/pillarjs/path-to-regexp/tree/v1.7.0

  1. Вторая цель этого — сделать параметр (все, что идет после /app/) доступным через хук useParams React Router (https://reactrouter.com/web/api/Hooks/useparams).

Хороший пример синтаксиса можно найти в разделе «Параметры маршрута» на этой странице: https://expressjs.com/en/guide/routing.html

person Andy    schedule 04.08.2020