我正在努力显示每四个记录如何显示列或中断列。我使用的是bulma列,我的目标是在数组映射内的每四个记录上显示列。感谢您的帮助。
内部地图功能
{list.map(function(item, key){
return <div className="columns">
<div className="column">{item.name}</div>
</div>
})}
假设列表为8条记录,则预期结果应为
<div className="columns">
<div className="column">name 1</div>
<div className="column">name 2</div>
<div className="column">name 3</div>
<div className="column">name 4</div>
</div>
<div className="columns">
<div className="column">name 5</div>
<div className="column">name 6</div>
<div className="column">name 7</div>
<div className="column">name 8</div>
</div>
答案 0 :(得分:2)
您可以在呈现列之前执行类似的操作,
let columns = [];
let records = [1,2,3,4,5,6,7,8];
const recordsPerColumn = 4
while (records.length) {
columns.push(records.splice(0, recordsPerColumn));
}
// this will group the records in size of 4, which then you can iterate over
return (
....
{columns.map(function(column, key){
return <div className="columns">
{ // for rendering the items dynamically, this will also hold good in case there are less than 4 records for say the last group
column.map(item=> <div className="column">{item}</div>)
}
</div>
})}
....
)
答案 1 :(得分:2)
您可以从数组中创建块,然后使用<div className="columns">
function array_chunks(array, chunks) {
let result = [];
let n = array.length;
for (let i = 0; i < n; i += chunks) {
result = [...result, array.slice(i, i + chunks)];
}
return result;
}
let columns = array_chunks(list, 4);
function App() {
return (
<div className="App">
{columns.map(function(items, key) {
return (
<div className="columns">
{items.map(function(item) {
return <div className="column">{item.name}</div>;
})}
</div>
);
})}
</div>
);
}
请参阅sandbox。
答案 2 :(得分:1)
我参加聚会有点晚了。但这是一个更精确的解决方案:
您可以在此处使用Array.reduce
。
const columns = [1,2,3,4,5,6,7,8];
{
columns
.reduce((acc, curr, index, self) => {
if (index % 4 === 0) acc.push(self.slice(index, index + 4));
return acc;
}, [])
.map((items, _idx) => (
<div className="columns" key={_idx}>
{
items.map(item => (
<div className="column" key={item}>{item}</div>
))
}
</div>
))
}
答案 3 :(得分:0)
要获得相同的布局,可以使用sizing property of Bulma列:
return (
<div className="columns">
{list.map(function(item, key) {
return (
// Orders 4 items per column, rest of items rearrange automatically
<div className="column is-one-quarter">{item.name}</div>
)
}}
</div>
)}
如果需要指定的数据结构(出于某些其他原因),则必须将数据转换为特定的数据结构。
function chunk (arr, len) {
var chunks = [],
i = 0,
n = arr.length;
while (i < n) {
chunks.push(arr.slice(i, i += len));
}
return chunks;
}
const dummyArray = new Array(20).fill(1);
const { useState, useEffect } = React;
function App() {
const [data, setData] = useState([]);
useEffect(() => {
setData(chunk(dummyArray, 4));
}, []);
return (
<main>
{data.map((item, index) => (
<div className="columns" key={index}>
{item.map((subitem, index)=> (
<div className="column" key={index}>
<p>1</p>
</div>
))}
</div>
))}
</main>
);
}
ReactDOM.render(<App />, document.getElementById("app"));
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css">
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="app"></div>
答案 4 :(得分:0)
将这4个项目拆分到不同的div
容器中是否至关重要?
布尔玛在.is-multiline
容器上有一个.columns
类,该类使您可以根据需要添加任意多的列,它们将自动换行,从而允许您创建一个由4列组成的网格。 / p>
https://bulma.io/documentation/columns/options/#multiline
<link href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.css" rel="stylesheet"/>
<div class="columns is-multiline is-mobile">
<div class="column is-3">1</div>
<div class="column is-3">2</div>
<div class="column is-3">3</div>
<div class="column is-3">4</div>
<div class="column is-3">5</div>
<div class="column is-3">6</div>
<div class="column is-3">7</div>
<div class="column is-3">8</div>
</div>
所以也许这样编辑代码:
{list.map(function(item, key){
return <div className="columns is-multiline">
<div className="column is-3">{item.name}</div>
</div>
})}