Question

在React中，下面给出的冒号和美元是什么意思？

冒号示例： ＆lt; Route path = {'/ movie /：id'} component = {Movie} /＆gt;

美元的例子，（在表达之前使用它，但为什么）：
＆lt; Link to = {`/ movie / $ {this.state.movies [index] .id}`} key = {index} className =“movieLink”＆gt;

Answer 1

$没有反应。但其ES6功能在Template Literals basic 或template literals更多地称为模板文字。

在反应中，您在路由器模块中有路由和链路组件。

路由有两个属性：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})表示。

您可以阅读有关Template literals on Mozilla

的更多信息

Answer 3

我也花了很长时间试图找出结肠的运作方式。不得不对示例进行反向工程而不是在API部分中进行说明，这真令人沮丧。

已经说过，文档https://reacttraining.com/react-router/core/api/Route中有一条提示，其中指出该路径接受“ path-to-regexp@^1.7.0可以理解的任何有效URL路径或路径数组”。如果您查看正则表达式路径的文档，您会看到“命名参数是通过在参数名称前加冒号来定义的。默认情况下，该参数将匹配到以下路径段为止”

然后，您可以查看https://reacttraining.com/react-router/core/api/match，它说明了如何获取match对象以及如何从中提取参数。

Answer 4

美元是一种在字符串中使用变量的es6语法。

Answer 5

在这种情况下，:是React Router（和Express）用于路径的path-to-regexp语法的一部分；它允许您指定一个参数。这有两个含义。

匹配多个网址。

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

将匹配任何/app/后跟任何内容。请注意，这里有灵活的匹配类型，但它们不是典型的正则表达式：https://github.com/pillarjs/path-to-regexp/tree/v1.7.0

第二个目的是通过React Router的/app/钩子（https://reactrouter.com/web/api/Hooks/useparams）使参数（useParams之后的所有内容）可用。

有关语法的良好示例，请查看此页面上的“路由参数”部分： https://expressjs.com/en/guide/routing.html

在React中，美元和冒号代表什么？

5 个答案: