无序列表显示不正确答案

【问题标题】：Unordered List not appearing properly无序列表显示不正确
【发布时间】：2020-07-07 16:47:30
【问题描述】：

import React, { Component } from 'react';
import ListItem from './ListItem.js';
import AddItem from './AddItem.js';
const uuidv4 = require('uuid');

class List extends Component {

  render() {
    var name = this.props.name;
    var items = this.props.items;

if (items.length > 0) {
  return (
    <div id={name} key={uuidv4()}>
      <h3>{name} List</h3>
        <ul>
        {items.map(function(item) {
          return (
                <li key={uuidv4()}><ListItem item={item} key={uuidv4()} /></li>
          )
        })}
        </ul>
      <AddItem idName={name} addItem={this.props.addItem.bind(this)} />
    </div>
  )
}

return (
  <div id={name} key={uuidv4()}>
    <h3>{name} List</h3>
    <AddItem idName={name} addItem={this.props.addItem.bind(this)} />
  </div>
)

  }
}

export default List;

在 JSX 中，我试图创建一个 ListItem 反应组件，该组件在 span 元素中返回一些粗体文本。但我也希望 ListItem 组件显示为无序列表，但是，它看起来像下图。

List 1 List 是列表的表头，每个Item（Item 1、Item 2、Item3）都是ListItem 组件返回的单独文本。而底部的表单是输入新项目（ListItem组件）的位置。

【问题讨论】：

能否请您尝试应用“li” css 属性 --> display: list-item;
请提供minimal reproducible example 呈现的 HTML 和您使用的任何 CSS。您可以使用Stack Snippets 来执行此操作（工具栏上的图标在页面中看起来像<>）。

标签： javascript reactjs

【解决方案1】：

试试这个

return (
<div>
 <h3>{name} List</h3>
  <ul>
       {items.map(item=><li><ListItem  key={item.uuidv4} item={item} /></li>)}
  </ul>
</div>

)

【讨论】：