Question

我有一个简单的循环来显示从远程API返回的内容：

<p>
{
   Object.keys(today).map(function (key) {
     var item=today[key];
     return (
       <a href={"/books/"+item.bookid+".html"} key={item.bookid}>{item.title}</a>
     );
   })
}
</p>

这完全没问题。

现在我想添加更多输出：

<a href={"/books/"+item.bookid+".html"} key={item.bookid}>{item.title}</a>({item.fromnow} years ago)

当我执行上述操作时，出现错误：Unexpected token。

如果我将years ago文字移到<a>...</a>内，那就没关系了：

<a href={"/books/"+item.bookid+".html"} key={item.bookid}>{item.title}({item.fromnow} years ago)</a>

我不确定我是否已经说清楚了。

当然，我可以接受xxx years ago成为链接的一部分，但我需要知道如何将该部分与链接分开。

非常感谢您的帮助。

Answer 1

这是因为从React 15开始，您仍然需要在封闭标记中包装相邻元素。您可能收到此错误：

Syntax error: Adjacent JSX elements must be wrapped in an enclosing tag

当你在几年前添加到返回值时，它实际上返回了两个元素，<a>和years ago文本。

<a href={"/books/"+item.bookid+".html"} key={item.bookid}>{item.title </a>
({item.fromnow} years ago)

将它们包裹在<div>或<span>中是此问题的常见解决方案。

return (
  <span>
    <a href={"/books/"+item.bookid+".html"} key={item.bookid}>{item.title}</a>
    ({item.fromnow} years ago)
  </span>
);

JSX返回一个html段

1 个答案: