在Reactjs的新行上显示每个数组项

Question

正在执行ReactJs项目。值得注意的是，我是一名单身学生，对此反应很新。代码的一部分包含可以像按钮一样单击的图像。单击后，将打开一个React Modal元素，并在内部显示数组的内容

Screen of arrays printed contents

您将从上图中看到，每个数组项都以不同的数字开头。问题是所有数组元素都打印在一条连续的线上，而每个元素之间没有间距。

这里是模态代码

                        <button className='space boxButton button3' onClick={this.openGreenModal}>
                        <img className = "boxImg" src = {greenBox}/>
                        <div onClick={e => e.stopPropagation()}>
                            <Modal className= "ModalGreen" isOpen={this.state.greenVisible} >
                                <div>
                                <img className = "boxImgPopUp" src = {greenBox}/>
                                    <h1> Green box testing</h1>

                                    //PRINTING ARRAY ITEMS ON THIS LINE
                                    <p>Items: {this.state.greenArray}</p>
                                    <button onClick={this.closeGreenModal}>Close</button>
                                </div>
                            </Modal>
                        </div>
                    </button>

有没有一种方法可以在新行上显示每个项目？

如果该项目需要更多代码，请告诉我

Answer 1

搜索“反应渲染列表”使我进入了React文档，正好是这种事情：https://reactjs.org/docs/lists-and-keys.html

尽管要给出实际答案，React只是为您创建HTML，所以您将希望创建HTML标签以在不同的行上呈现项目，就像您手动创建HTML一样。

类似：

{this.state.greenArray.map((item) =>
  <p key={item.something_unique}>{item}<p>
)}