将数组呈现给具有样式组件的行

Question

我在这里有一个简单的数组，试图将其渲染到网格中。

下面的代码将数组呈现为：

HAMDDN

我想渲染它，以便以下内容将导致不同的行

HA
MD
DN

有什么想法吗？完整的代码如下。我知道这是一个简单的任务，但我是新手。谢谢！

import React from 'react';
import styled from 'styled-components';
import Page from '../Shared/Page'

export const StateGrid = styled.div`
         display:inline-block;
       `;

const list =[
    "HA", "MD", "DN"
]

function States () {
     return (
       <Page name="statistics">
           <StateGrid>{list}</StateGrid>
       </Page>
     );
}

export default function() {
  return (
    <States/>
  );
}

Answer 1

然后您可以与' '加入，使它们成为适合您需求的格式的单个字符串

const list = ['HA', 'MD', 'DN'];
const display = list.join(' ');

<StateGrid>{display}</StateGrid>