Как получить первые N элементов из массива с помощью ReactJS?

Опубликовано: 7 Августа, 2021

Мы можем использовать метод slice (), чтобы получить первые N элементов из массива.

Синтаксис:

 array.slice (0, n);

Пример:

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

Выход:

 [1,2,3]

Примечание. Функция среза для массивов возвращает неглубокую копию массива и не изменяет исходный массив. И если N больше, чем размер массива, то он не вызовет никаких ошибок и вернет сам массив целиком.

Создание приложения React:

Шаг 1. Создайте приложение React, используя следующую команду:

 npx создать-реагировать-приложение имя папки

Шаг 2: После создания папки проекта, т.е. имени папки, перейдите в нее с помощью следующей команды:

 cd имя папки

Структура проекта: это будет выглядеть следующим образом.

Структура проекта

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 <button style={{ margin: 10 }}
        type= "button" class= "btn btn-primary" >{i}</button>
    })
 
    return (
      <div>{items}</div>
    )
  }
 }
 
export App default 

Примечание. Вы можете применить свой собственный стиль к приложению. Здесь мы использовали загрузочный CSS, чтобы включить его в ваш проект, просто добавьте следующий <link> в наш файл index.html.

<link
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, количество кнопок увеличится и наоборот.

JavaScript Picked

Как получить первые N элементов из массива с помощью ReactJS?

Javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ