地图功能React中的定位

Posted 2023-02-21

【中文标题】地图功能React中的定位

【英文标题】：Positioning in Map function React

【发布时间】：2022-01-23 18:38:00

【问题描述】：

我有一个简单的问题，我有点卡住了。我有一个数组，我想在一个点使用一半数组，在其他地方使用一半数组。所以我正在使用地图功能，我有点卡住了如何在地图功能中使用定位。我想在某一点渲染数组的一部分，在另一点渲染另一半。

例如我有一个数组：

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>
      )
    

【问题讨论】：

改用numbers.filter？

您可以使用索引在地图函数中使用 if/else 条件。

【参考方案1】：

您可以使用.slice 将您的数组拆分为两个数组，然后在每个数组上使用.map()，见下文

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(...)

【参考方案2】：

您可以通过两种方式完成此操作：使用 CSS，或将数组分成两半。

使用 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>

使用 JS

const numbers = [1, 2, 3, 4, 5, 6, 7, 8];

const splitArr = (arr) =>
  ((half) => [arr.slice(0, half), arr.slice(-half)])
  (Math.ceil(arr.length / 2))


const App = () =>
(
  <div className="flex">
    
      splitArr(numbers).map((arr) => (
        <div className="row">
          
            arr.map((n) => (
              <div>n</div>
            ))
          
        </div>
      ))
    
  </div>
);

// Render it
ReactDOM.render(<App />, document.getElementById('react'));

.flex 
  display: flex;
  flex-direction: column;
  flex: 1;


.row 
  display: flex;
  flex: 1;
  justify-content: space-evenly;

<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>

【参考方案3】：

在这种情况下，您必须使用过滤器。不是地图 对于第一部分，您可以使用这样的过滤器：

    numbers.filter((it, idx) => 
        return idx < (numbers.length /2) && <li > item </li>
    )

第二个你可以使用这个：

    numbers.filter((it, idx) => 
        return idx + 1 > (numbers.length /2) && it
    )

【讨论】：

不，因为您的filter 不会像您认为的那样返回<li>item</li>，如果您的返回计算结果为真值，它将返回当前迭代中的值，即来自原始数组。 .map() 是正确使用的函数

【参考方案4】：

你需要这样的东西吗？

import React from 'react';

const Home = (props) => 
  const numbers = [1, 2, 3, 4, 5, 6, 7, 8];
  return(
    <div>
      numbers.map((item, index) => (index <= numbers.length/2) ? (<li>item</li>):null)
      numbers.map((item, index) => (index > numbers.length/2) ? (<li>item</li>):null)
    </div>
  );


export default Home;