Javascript 向React中的数组列表项添加空间

我在数组中存储了一些数据：

const currencies =['USD','EUR','AUD','CNY','AED', 'AFN', 'ALL', 'AMD', 'ANG', 'AOA', 'ARS',
'AUD', 'AWG','AZN', 'BAM', 'BBD', 'BDT', 'BGN', ' BHD', 'BIF', 'BMD'
,'BND', 'BOB', 'BRL', 'BSD', 'BTN', 'BWP', 'BYN' ]

const firstCurrencies = currencies.slice(0,4)

我的React组件相关代码如下：

<div className="flex flex-col">   
                      <h3>Select a currency</h3>
                      <div className="flex flex-row z-40">
                        {firstCurrencies.map((firstCurrency,index) =>(
                          <div className="">
                            <div key={index} className="">
                            <span><Link to="#">{firstCurrency}</Link></span>
                            </div>
                            <hr></hr>
                          </div>  
                        ))}
                      </div>
                      </div>  

选择一种货币
{firstCurrency.map（（firstCurrency，index）=>(
{firstCurrency}

))}

在项目后添加空间的最佳方式是什么

目前其显示如下：

这个想法是让货币之间有一个空格

我尝试了

firstcurrences.join（'，'）

在顶部，但给了我一个错误

---

有什么建议吗？

首先，这是css的视觉缺陷和问题，所以您可以使用填充和边距来解决它。但另一种方法是使用模板字符串，例如：

`${firstCurrency} `

---

这是获得结果的方法。我建议使用css而不是模板字符串来解决您的问题，这非常简单空间可以通过以下方式添加：

---

{firstCurrency}{''}

或

<span><Link to="#">{`${firstCurrency} `}</Link></span>

<span><Link to="#">{firstCurrency + ' '}</Link></span>

{${firstCurrency}}

或

<span><Link to="#">{`${firstCurrency} `}</Link></span>

<span><Link to="#">{firstCurrency + ' '}</Link></span>

{firstCurrency+'''}

我认为，如果使用引导，可以将类

px-1

添加到映射处理程序

->

中的第一个
div
中，或者可能是
pr-1
以避免左填充。