时间戳

首页 > 解决方案 > 在 React 中为数组列表项添加空间

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>

在项目之后添加空间的最佳方法是什么。

目前它的显示如下：

在此处输入图像描述

这个想法是让货币用空格分隔。

我firstCurrencies.join(',')在顶部尝试过，但给了我一个错误。

有小费吗？

标签： javascriptarraysreactjs

解决方案

起初，这是视觉错误和 css^ 问题，因此您可以使用填充和边距解决它。但另一种方法是使用模板字符串，例如：

`${firstCurrency} `

这就是获得结果的方法。我建议使用 css 而不是模板字符串来解决您的问题

推荐阅读