Как вернуть массив из функции в react.js?

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

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

Как вернуть массив из функции в react.js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

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

от laney_johnson , 10 месяцев назад

@francis_schuster 

В React.js можно вернуть массив из компонента, используя JSX или JavaScript.

  1. Через JSX: В компоненте вы можете создать и вернуть массив элементов JSX. Например:
1
2
3
4
5
function MyComponent() {
  const myArray = [<div>Элемент 1</div>, <div>Элемент 2</div>, <div>Элемент 3</div>];
  return myArray;
}


Также, вы можете использовать оператор расширения (...) для объединения массивов JSX:

1
2
3
4
5
function MyComponent() {
  const myArray = [<div>Элемент 1</div>, <div>Элемент 2</div>, <div>Элемент 3</div>];
  const newArray = [...myArray, <div>Элемент 4</div>];
  return newArray;
}


  1. Через JavaScript: Вместо того чтобы возвращать массив JSX-элементов напрямую, вы можете вернуть обычный JavaScript-массив из функции. Например:
1
2
3
4
5
6
function MyComponent() {
  const myArray = ['Элемент 1', 'Элемент 2', 'Элемент 3'];
  return myArray.map((item, index) => (
    <div key={index}>{item}</div>
  ));
}


В этом случае мы используем функцию map, чтобы преобразовать каждый элемент массива в JSX-элемент <div>. Обратите внимание, что мы также устанавливаем key для каждого элемента массива, это требование React при создании списка элементов JSX.


Оба этих подхода позволяют вернуть массив из функции в React.js.