Как отрисовать список(массив) в react.js?

Пользователь

от linnea , в категории: JavaScript , 7 месяцев назад

Как отрисовать список(массив) в react.js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от vicenta_kertzmann , 7 месяцев назад

@linnea 

В React.js можно отрисовать список или массив элементов, используя метод map(), который позволяет пройтись по каждому элементу массива и создать для него соответствующий компонент.


Вот пример кода, который отображает список элементов массива в виде маркированного списка:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
import React from 'react';

function MyComponent(props) {
  const myList = props.list.map((item, index) => (
    <li key={index}>{item}</li>
  ));

  return (
    <ul>
      {myList}
    </ul>
  );
}

export default MyComponent;


В этом примере компонент MyComponent получает массив list через свойства props. Затем используется метод map() для создания массива <li> элементов из каждого элемента массива list. Важно установить ключ key для каждого элемента списка, чтобы React мог эффективно отслеживать изменения элементов списка.


Наконец, отображаем список элементов, помещая массив <li> элементов внутри тега <ul>. Каждый элемент списка будет отображаться на отдельной строке внутри маркированного списка.