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

Question

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

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

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

Answer 1

$ не реагирует. Но его особенность ES6 назвала литералы шаблонов больше в шаблонных литералах базовых или шаблонных литералах.

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

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

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

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

Answer 2

Ну, это особенность JavaScript ES6,

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

var user = 'xyz' + newuser;

ES6:

var user = `xyz${newuser}`;

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

Вы можете прочитать больше о литералах шаблона на Mozilla

Answer 3

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

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

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

Answer 4

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

Answer 5

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

1. Чтобы сопоставить несколько URL-адресов.

<Route path='/app/:page'>

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

2. Вторая цель - сделать параметр (что бы ни было после /app/) доступно через React Router's useParamsкрючок (https://reactrouter.com/web/api/Hooks/useparams).

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