在 ReactJS 中的数组对象后添加空格

Question

我在 React 中映射一个数组，在其中输出保存在数组中的标签。我在每个对象后都有逗号，但也想要一个空格。

这是映射代码：

{

    result &&

        result.map(project => {

            if (project.item) project = project.item;

            return (

                <ProjectStyling key={project.id}>

                    <h4>Project Tags:</h4>

                    <p>{(project ? " " : ", ") + project.keywords}</p>

                </ProjectStyling>

            );

        });

}

目前它看起来像 "Bob,Foo,Bar" 我希望它看起来像 "Bob, Foo, Bar"

注意jsx中逗号后面已经有空格了

Answer 1

它显示时没有空格，因为这是数组的默认字符串表示形式。您可以使用join函数将每个元素与您想要的任何分隔符连接起来。就您而言，我认为逗号后跟空格是您想要的。<h4>Project Tags:</h4><p>{project.keywords.join(', ')}</p>