我的列表元素未格式化。我希望每个元素周围都有一个边框。

我已经试过了:

.list{
    border: 1px solid black;
}


为了这

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


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

最佳答案

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

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


仅当Items变量是数组时,此方法才有效。

编辑:我看着您的沙盒中有两点注意事项:


您的CSS未加载
您的商品已经是列表商品标签


为了获得理想的效果,我只向您的PostItem组件添加一个className属性,它看起来像这样:

PostItem.js

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


现在,新组件将具有className属性

NewList.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>;
};

10-05 20:54
查看更多