如何使用 ReactJS 从数组中获取前 N 个元素？

我们可以使用 slice() 方法从数组中获取前 N 个元素。

句法：

array.slice(0, n);

例子：

var num = [1, 2, 3, 4, 5];
var myBest = num.slice(0, 3);

输出：

[1,2,3]

注意：数组上的 slice函数返回数组的浅拷贝，并且不修改原始数组。如果 N 大于数组的大小，那么它不会出现任何错误并返回整个数组本身。

创建反应应用程序：

第 1 步：使用以下命令创建一个 React 应用程序：

npx create-react-app foldername

第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：

cd foldername

项目结构：它将如下所示。

项目结构

App.js：现在在 App.js 文件中写下以下代码。在这里，App 是我们编写代码的默认组件。

Javascript

import { React, Component } from "react";
class App extends Component {
  
  render() {
    // Numbers list
    const list = [1, 2, 3, 4, 5, 6, 7]
  
    // Defining our N
    var n = 4;
  
    // Slice function call
    var items = list.slice(0, n).map(i => {
      return {i}
    })
  
    return (
      
{items}
    )
  }
}
  
export default App

注意：您可以将自己的样式应用于应用程序。在这里，我们使用了引导 CSS，要将其包含在您的项目中，只需将以下添加到我们的index.html文件中。

rel=”stylesheet”
href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css”
integrity=”sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk”
crossorigin=”anonymous”
/>

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：由于 n 的值为四，因此将创建四个按钮。如果增加 n 的值，按钮的数量将增加，反之亦然。