时间戳

首页 > 解决方案 > 映射数组中的元素并在段落中显示它们

reactjs - 映射数组中的元素并在段落中显示它们

问题描述

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

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

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

如果我不加入数组，代码确实有效，但是文本看起来很难看。

标签： reactjsjsx

解决方案

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>

推荐阅读