我有一个简短的问题，我有点卡住了。我有一个数组，我想在一个点上使用数组的一半，在另一个点上使用数组的一半。所以我在使用地图功能，我有点被卡住了，我怎么能在地图功能中使用定位呢。我想在一点上渲染数组的一部分，在另一点上渲染另一半。
例如，我有一个数组：
const numbers = [1, 2, 3, 4, 5, 6, 7, 8];
我想把它放在两个不同的地方。
array.map((item, index) => {
return (
//here i want 1,2,3,4
<li > item </li>
})
}
array.map((item, index) => {
return (
//here i want 5,6,7,8
<li > item </li>
})
}
您可以通过两种方式完成这一任务：使用CSS，或者将数组一分为二。
const numbers = [1, 2, 3, 4, 5, 6, 7, 8];
const App = () =>
(
<div className="grid">
{
numbers.map((n) => (
<div>{n}</div>
))
}
</div>
);
// Render it
ReactDOM.render(<App />, document.getElementById('react'));.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.grid div {
display: grid;
justify-content: center;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>
您可以使用。slice将阵列拆分为两个阵列，然后使用。映射（），请参见下文
const numbers = [1, 2, 3, 4, 5, 6, 7, 8];
const array1 = numbers.slice(0, Math.floor(numbers.length/2))
const array2 = numbers.slice(Math.floor(numbers.length / 2))
console.log(array1)
console.log(array2)
//array1.map(...)
//and..
//array2.map(...)
在这种情况下，您必须使用过滤器。不映射
对于第一部分，您可以使用如下过滤器：
numbers.filter((it, idx) => {
return idx < (numbers.length /2) && <li > item </li>
})
对于第二个，您可以使用：
numbers.filter((it, idx) => {
return idx + 1 > (numbers.length /2) && it
})
