我在這樣的回圈中有模板渲染
{
category.menuIds.map((menuId, idx) => (
<TemplateMenu
index={idx}
key={menuId}
menu={this.props.menus[menuId]}
menuLayout={category.menu_layout}
/>
));
}
它呈現<div>如下串列：
<div id="m0" class="Menu">...</div>
<div id="m1" class="Menu">...</div>
<div id="m2" class="Menu">...</div>
<div id="m3" class="Menu">...</div>
<div id="m4" class="Menu">...</div>
<div id="m5" class="Menu">...</div>
<div id="m6" class="Menu">...</div>
<div id="m7" class="Menu">...</div>
<div id="m8" class="Menu">...</div>
<div id="m9" class="Menu">...</div>
我想<div>根據條件this.props.index % 5 !== 0將每 4 個分組以獲得下面的 HTML：
<div id="m0" class="Menu">...</div>
<div class="MenuRight">
<div id="m1" class="Menu">...</div>
<div id="m2" class="Menu">...</div>
<div id="m3" class="Menu">...</div>
<div id="m4" class="Menu">...</div>
</div>
<div id="m5" class="Menu">...</div>
<div class="MenuRight">
<div id="m6" class="Menu">...</div>
<div id="m7" class="Menu">...</div>
<div id="m8" class="Menu">...</div>
<div id="m9" class="Menu">...</div>
</div>
任何幫助，將不勝感激。
[編輯]
index沒關系。它可以與現在相同，也可以相對于組。我只是在示例代碼中對其進行了描述，以使其更加清晰。
在條件為 時this.props.index % 5 === 0，元素<div >將是獨立的，否則其他元素將與 分組<div >。
uj5u.com熱心網友回復：
在將標簽映射到 的平面串列之后重新組合標簽會很復雜TemplateMenu，因為每個元素都不知道根據其父級邏輯的位置。
為了解決您的問題，我將在將元素映射到最終元素之前將它們TemplateMenu分組，然后將它們渲染為單個或分組的MenuRight.
例如，這是我認為將它們分組的最快方法，但當然還有許多其他演算法您可能更喜歡：
const groupedIds = menuIds.reduce((groups: any[], id: any, index: number) => {
if (index % 5 === 0) {
groups[Math.floor(index / 5) * 2] = [id];
} else {
const groupIndex = Math.floor(index / 5) * 2 1;
if (groups[groupIndex]) {
groups[groupIndex].push(id);
} else {
groups[groupIndex] = [id];
}
}
return groups;
}, []);
這將導致像[[0],[1,2,3,4],[5],[6,7...]...]. 然后您可以使用這些組以不同的方式呈現它們。
這是一個來自您的問題的作業示例（也在 CodeSandbox 上）：
顯示代碼片段
function TemplateMenu({ index, id }: { index: number; id: any }) {
return (
<div id={`m${index}`} className="Menu">
{id}
</div>
);
}
/*export default*/ function App() {
const menuIds = ["single 1", 2, 3, 4, 5, "single 2", "a", "b"];
const groupedIds = menuIds.reduce((groups: any[], id: any, index: number) => {
if (index % 5 === 0) {
groups[Math.floor(index / 5) * 2] = [id];
} else {
const groupIndex = Math.floor(index / 5) * 2 1;
if (groups[groupIndex]) {
groups[groupIndex].push(id);
} else {
groups[groupIndex] = [id];
}
}
return groups;
}, []);
return (
<div className="App">
{/*{menuIds.map((id, idx) => {
return <TemplateMenu key={id} index={idx} id={id} />;
})}*/}
{groupedIds.map((group, idx) => {
if (group.length === 1) {
return <TemplateMenu key={group[0]} index={idx} id={group[0]} />;
} else {
return (
<div className="MenuRight">
{group.map((id, idx) => {
return <TemplateMenu key={id} index={idx} id={id} />;
})}
</div>
);
}
})}
</div>
);
}
ReactDOM.render(<App />, document.getElementById("root"));.Menu {
outline: 1px solid red;
}
.MenuRight {
outline: 1px solid blue;
padding: 4px;
}<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>uj5u.com熱心網友回復：
你可以用一個簡單的回圈來做到這一點，這對我來說是迄今為止最清晰的方法；看評論：
const {menuIds} = category;
const elements = [];
// Include every 5th element directly, including the 0th one;
// group the (up to) four following it
let index = 0;
while (index < menuIds.length) {
// Use this entry directly, note we increment index after using it
// in the `TemplateMenu`
const {menuId} = menuIds[index];
elements.push(
<TemplateMenu
index={index }
key={menuId}
menu={this.props.menus[menuId]}
menuLayout={category.menu_layout}
/>
);
// Follow it with up to four in a `<div >`
const following = menuIds.slice(index, index 4);
if (following.length) {
// Note we increment `index` as we go
elements.push(
<div className="MenuRight">
{following.map(({menuId}) => (
<TemplateMenu
index={index }
key={menuId}
menu={this.props.menus[menuId]}
menuLayout={category.menu_layout}
/>
))}
</div>
);
}
}
// ...use {elements}...
現場示例：
顯示代碼片段
const {useState} = React;
const TemplateMenu = ({index, menu, menuLayout}) => <div className="TemplateMenu">{menu}</div>;
class Example extends React.Component {
render() {
const category = {
menuIds: [
{menuId: 0},
{menuId: 1},
{menuId: 2},
{menuId: 3},
{menuId: 4},
{menuId: 5},
{menuId: 6},
{menuId: 7},
{menuId: 8},
{menuId: 9},
],
menu_layout: "example",
};
const {menuIds} = category;
const elements = [];
// Include every 5th element directly, including the 0th one;
// group the (up to) four following it
let index = 0;
while (index < menuIds.length) {
// Use this entry directly, note we increment index after using it
// in the `TemplateMenu`
const {menuId} = menuIds[index];
elements.push(
<TemplateMenu
index={index }
key={menuId}
menu={this.props.menus[menuId]}
menuLayout={category.menu_layout}
/>
);
// Follow it with up to four in a `<div >`
const following = menuIds.slice(index, index 4);
if (following.length) {
// Note we increment `index` as we go
elements.push(
<div className="MenuRight">
{following.map(({menuId}) => (
<TemplateMenu
index={index }
key={menuId}
menu={this.props.menus[menuId]}
menuLayout={category.menu_layout}
/>
))}
</div>
);
}
}
// ...use {elements}...
return <div>{elements}</div>;
}
};
const menus = [
"Menu 0",
"Menu 1",
"Menu 2",
"Menu 3",
"Menu 4",
"Menu 5",
"Menu 6",
"Menu 7",
"Menu 8",
"Menu 9",
];
ReactDOM.render(
<Example menus={menus} />,
document.getElementById("root")
);.TemplateMenu {
border: 1px solid green;
margin: 4px;
}
.MenuRight {
margin: 4px;
padding: 4px;
border: 1px solid red;
}<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>uj5u.com熱心網友回復：
您可以將categories.menuIds陣列縮減為類似于上述結構的二維陣列。例如。[[0], [1, 2, 3, 4], [5], [6, 7, 8, 9]...]. 現在偶數索引包含 MenuItem [0]，奇數索引包含 MenuRight [1, 2, 3, 4]。現在我們可以有條件地使用Array.map().
作業示例： 演示鏈接
首先減少categories.menuIds陣列
const menuIds = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14];
const transformed = menuIds.reduce((acc, curr, idx) => {
if (idx % 5 === 0) {
const i = Math.floor(idx / 5) * 2;
acc[i] = [curr];
} else {
const parentIdx = Math.floor(idx / 5) * 2 1;
acc[parentIdx] = acc[parentIdx] || [];
acc[parentIdx] = [...acc[parentIdx], curr];
}
return acc;
}, []);
console.log(transformed);在React使用中呈現這個Array.map()
<div className="App">
{transformed.map((item, idx) => {
return (
<>
{idx % 2 === 0 && (
<div key={idx} className="Menu">
{item}
</div>
)}
{idx % 2 === 1 && (
<div key={idx} className="MenuRight">
{item.map((menuRight, i) => (
<div key={i} className="Menu">
{menuRight}
</div>
))}
</div>
)}
</>
);
})}
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/386037.html
標籤：javascript 数组 反应
上一篇：在pd資料幀單元格內切片陣列