我的列表元素未格式化。我希望每个元素周围都有一个边框。
我已经试过了:
.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>;
};