模板字符串使用反引号

Question

所以我在传递映射状态下的对象的值作为参数时遇到麻烦。我环顾四周，这似乎对我可以找到的其他所有人都起作用。

我还尝试将其添加为状态或通过将其作为查询添加到路径名之后

Shoppinglist.map(Order =>
                    <tr key={Order.orderId}>
                        <td>{Order.date}</td>
                        <td>{Order.title}</td>
                        <td>{Order.price}</td>
                        <td>{Order.supplier}</td>
                        <td>
                           <Link to={'/CreateOrder/${Order.orderId}'}>
                            New Order</Link>
                        </td>                   
                    </tr>
                )

我的路线如下：

<Route path='/CreateOrder/:orderId?' component={CreateOrder} />

路径只是这样。 Url:"/CreateOrder/${Order.orderId} 而不是在/CreateOrder/

之后显示实际ID

Answer 1

您应该在此处使用模板字符串替换

 <Link to={'/CreateOrder/${Order.orderId}'}>

使用

 <Link to={`/CreateOrder/${Order.orderId}`}> // note backticks

希望有帮助

Answer 2

模板字符串使用反引号

您正在尝试使用JavaScript中的Template literals (Template strings)方法生成网址，但当前使用错误的字符来创建它。

模板文字用反引号`（重音符）括起来，而不是双引号或单引号

要解决您的问题，请替换

<Link to={'/CreateOrder/${Order.orderId}'}>
                            New Order</Link>

作者

<Link to={`/CreateOrder/${Order.orderId}`}>
                            New Order</Link>

Answer 3

您所做的一切正确，只需使用此`而不是'

替换此

<Link to={'/CreateOrder/${Order.orderId}'}>

与

 <Link to={`/CreateOrder/${Order.orderId}`}>

参考什么是模板文字

https://www.youtube.com/watch?v=bD52VbXafqU

为什么我不能从映射状态传递对象作为我的反应路线链接中的参数

3 个答案:

模板字符串使用反引号