表达式预期和语法错误:Unexpected token jsx nextjs
Posted
技术标签:
【中文标题】表达式预期和语法错误:Unexpected token jsx nextjs【英文标题】:expression expected and Syntax error: Unexpected token jsx nextjs 【发布时间】:2021-10-26 04:02:18 【问题描述】:从我使用的数组中渲染表格
const Posts: NextPage = ( posts: any) =>
return (
<>
.....
<tbody>
posts.map((post: any) =>
const _date = new Date(post.expiryDate);
const _expiryDate = `$_date.getFullYear()-$_date.getMonth()-$_date.getDay()`;
return <tr key=post._id onClick=() => showDetails(post)>
<td>post.type</td>
<td>_expiryDate</td>
</tr>;
)
</tbody>
这很完美。单击任何行时,我会将发布数据传递给新组件以显示详细信息。
所以在我正在使用的详细信息页面上
<tr>
<td className="table-key">Expiry</td>
<td className="table-value">post.expiryDate</td>
const _date = new Date(post.expiryDate);
const _expiryDate = `$_date.getFullYear()-$_date.getMonth()-$_date.getDay()`;
return <td className="table-value">_expiryDate</td>;
</tr>
但这是在控制台上显示Expression expected
Syntax error: Unexpected token
在列表页面上,同样的表达方式有效吗?有什么问题?
【问题讨论】:
可以显示列表页吗? @RyanLe,更新问题, 【参考方案1】:在您的错误情况下,您在 JSX 中使用
,即 Embedding Expressions in JSX
在 jsx 中使用 类似于
return()
,就像在普通 js 中一样,你不能在那里声明一个新变量,但使用另一个映射,过滤你可以。
这将引发错误,因为该表达式在 中无效。
您需要在另一个函数中呈现您的代码块:
const renderExpiryDate = () =>
const _date = new Date(post.expiryDate);
const _expiryDate = `$_date.getFullYear()-$_date.getMonth()-$_date.getDay()`;
return <td className="table-value">_expiryDate</td>;
然后把它带到 JSX:
<tr>
<td className="table-key">Expiry</td>
<td className="table-value">post.expiryDate</td>
renderExpiryDate()
</tr>
在第一种情况下,您不会收到类似的错误,因为您的表达式位于普通 javascript 的 map 函数中。
【讨论】:
感谢您的回答,在第二种情况下,我仍然使用 javascipt,贴花一些变量并返回 html,:( 有点不同,JSX 中的
已经是return ()
。就像在 js 中一样,您不能在该块内声明新变量。但是使用另一张地图,过滤器..等。你可以以上是关于表达式预期和语法错误:Unexpected token jsx nextjs的主要内容,如果未能解决你的问题,请参考以下文章
语法错误:bash 脚本中的“fi”意外(预期“then”)
linux 运行一个可执行文件,出现 line 1: syntax error: unexpected "(" 的错误