映射数组中的元素并将其显示在段落中

Question

我有一个包含3个元素的数组，我想通过它们进行映射(为每个元素创建一个<a>标记)，并通过一个,连接它们。当我使用.join连接数组中的元素时，显示的是：with .join(', ')。发生这种情况有什么原因吗？这是我的代码(结合使用react和jsx)：

const items = ['word1', 'word2', 'word3'];

return <p> {items.map((m) => {
return <a href={`#${m}`}>{m}</a>;
}).join(', ')}
</p>

如果我不加入数组，代码就可以工作，但是文本看起来很难看。

Answer 1

Array.join()将强制您的JSX为字符串，您将获得[Object object]。您可以根据item的索引添加,，如(i ? ', ' : '')，以使您的项目以逗号分隔。

​

const App = () => {
const items = ['word1', 'word2', 'word3'];

return (
  <p> 
    {
     items.map((m, i) => {
      return <a href={`#${m}`}>{(i ? ', ' : '') + m}</a>;
     })
    }
  </p>)
}

ReactDOM.render(
  <App />,
  document.getElementById("root")
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

​