时间戳

首页 > 解决方案 > 我的无序列表是从 json 文件呈现的，但我想要每个列表元素周围的边框

javascript - 我的无序列表是从 json 文件呈现的，但我想要每个列表元素周围的边框

问题描述

我的列表元素没有格式化。我想要每个元素周围的边框。

我试过这个：

.list{
    border: 1px solid black;
}

为了这

 return (
        <ul className="col-md-6 list-group">
        <li class="ywList">
        { Items}
        </li>
        </ul>

呈现的列表应该在每个元素周围显示一个边框，以便每个列表元素在一个盒子中以相同的大小排列。

标签： javascriptcssreactjslist

解决方案

如评论中所述，您应该将“class”替换为“className”并循环遍历您的项目以将它们呈现为列表元素。

return (
  <ul className="col-md-6 list-group">
      {
         Items.map(item => (
              // Here
              <li className="orderedList">
                  {item}
              </li>
         ))
      }
  </ul>
);

这仅适用于 Items 变量是数组的情况。

编辑：我查看了您的沙箱，注意到两件事：

  1. 你的 CSS 没有加载
  2. 您的项目已经是列表项目标签

为了获得所需的效果，我只需在 PostItem 组件中添加一个 className 道具，它看起来像这样：

PostItem.js

// Here we check the className prop
<li className={`list-group-item ${props.className || ''}`}>
 ...
</li>

新组件现在将有一个 className 道具

新列表.js

const NewList = props => {
  const NewListItems = props.ambers.map(amber => {
    return (
      <PostItem
        // Here we add a className
        className="orderedList"
        key={amber.data.created}
        post={amber.data}
      />
    );
  });

  return <ul className="col-md-6 list-group">{NewListItems}</ul>;
};

推荐阅读