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

Question

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

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]。您可以像(i ? ', ' : '')一样，根据item的索引添加,，使您的项目以逗号分隔。

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>