我想在一行中渲染 1 行和 2 列，
card 1 card 2 //1st Row
card 3 card 4 //2nd Row
card 5 card 6 //3rd Row
我尝试使用这个逻辑 ((index+1) % 2 == 0 ) 但它似乎不符合我想实现的目标
下面是我尝试实现的代码:
return data && data.map((data, index) => {
if((index+1) % 2 == 0 ) {
return (
<Row key={data.id}>
<Column>
<Container>
<Top imageUrl={data.image}>
</Top>
<Bottom>
<Left>
<Details>
<SmallSUbText>{data.name}</SmallSUbText>
</Details>
</Left>
</Bottom>
</Container>
</Column>
<Column>
<Container>
<Top imageUrl={data.image}>
</Top>
<Bottom>
<Left>
<Details>
<SmallSUbText>{data.name}</SmallSUbText>
</Details>
</Left>
</Bottom>
</Container>
</Column>
</Row>
)
}
})
但是好像不行
我们将不胜感激!
最佳答案
逻辑网格分布(Javascript 和 React 组件)
如果你使用逻辑就试试这样的:
function render() {
let columns = 2;
let result = [];
let row = 0;
data = data || [];
data.forEach((item,index)=>{
result[row] = result[row] || [];
result[row].push(item);
if (index > 0 && (index + 1) % columns == 0) {
row++;
}
});
return result.map((row,index)=>{
return (
<Row key={index}>
{
row.map(col => (
<Column>
<Container>
<Top imageUrl={col.image}>
</Top>
<Bottom>
<Left>
<Details>
<SmallSUbText>{col.name}</SmallSUbText>
</Details>
</Left>
</Bottom>
</Container>
</Column>
));
}
</Row>
);
}
);
}
/**/
注意:您可以使用 bootstrap 或 flexbox 或一些网格系统 css
Boostrap 可以提供帮助，只需在行上渲染列(无行)，并使用 css 类 row 和 col-6 为 2 列或 col- 4 代表 3 列，或者两者都是响应式的，这里有一个关于它的片段:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<style>
Column {
border: dotted red 1px;
}
</style>
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<Row class="row">
<Column class="col-6 col-sm-4">
<Container>
<Top>
</Top>
<Bottom>
<Left> # 1
<Details>
<SmallSUbText>{data.name}</SmallSUbText>
</Details>
</Left>
</Bottom>
</Container>
</Column>
<Column class="col-6 col-sm-4">
<Container>
<Top>
</Top>
<Bottom>
<Left> # 2
<Details>
<SmallSUbText>{data.name}</SmallSUbText>
</Details>
</Left>
</Bottom>
</Container>
</Column>
<Column class="col-6 col-sm-4">
<Container>
<Top>
</Top>
<Bottom>
<Left> # 3
<Details>
<SmallSUbText>{data.name}</SmallSUbText>
</Details>
</Left>
</Bottom>
</Container>
</Column>
<Column class="col-6 col-sm-4">
<Container>
<Top>
</Top>
<Bottom>
<Left> # 4
<Details>
<SmallSUbText>{data.name}</SmallSUbText>
</Details>
</Left>
</Bottom>
</Container>
</Column>
<Column class="col-6 col-sm-4">
<Container>
<Top>
</Top>
<Bottom>
<Left> # 5
<Details>
<SmallSUbText>{data.name}</SmallSUbText>
</Details>
</Left>
</Bottom>
</Container>
</Column>
<Column class="col-6 col-sm-4">
<Container>
<Top>
</Top>
<Bottom>
<Left> # 6
<Details>
<SmallSUbText>{data.name}</SmallSUbText>
</Details>
</Left>
</Bottom>
</Container>
</Column>
<Column class="col-6 col-sm-4">
<Container>
<Top>
</Top>
<Bottom>
<Left> # 7
<Details>
<SmallSUbText>{data.name}</SmallSUbText>
</Details>
</Left>
</Bottom>
</Container>
</Column>
<Column class="col-6 col-sm-4">
<Container>
<Top>
</Top>
<Bottom>
<Left> # 8
<Details>
<SmallSUbText>{data.name}</SmallSUbText>
</Details>
</Left>
</Bottom>
</Container>
</Column>
</Row>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="//code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>关于javascript - 如何在 html 中呈现 1 行和 2 列？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58887329/