Как показать случайные числа по возрастанию на react.js?

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

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

Как показать случайные числа по возрастанию на react.js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

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

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

@sherwood_littel 

Вы можете использовать компонент React и функцию Math.random() для генерации случайных чисел, а затем отсортировать их в порядке возрастания. Ниже приведен пример кода:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import React, { useState } from "react";

const RandomNumbers = () => {
  const [numbers, setNumbers] = useState([]);

  const generateNumbers = () => {
    const randomArr = Array.from({ length: 10 }, () =>
      Math.floor(Math.random() * 100)
    );
    const sortedArr = randomArr.sort((a, b) => a - b);

    setNumbers(sortedArr);
  };

  return (
    
      Generate Random Numbers
      
        {numbers.map((number, index) => (
          {number}
        ))}
      
    
  );
};

export default RandomNumbers;


В этом примере компонент RandomNumbers содержит кнопку "Generate Random Numbers", которая вызывает функцию generateNumbers при клике. Функция generateNumbers создает массив из 10 случайных чисел, сортирует его по возрастанию и устанавливает его в состояние numbers с помощью функции setNumbers. Затем числа отображаются в элементе ul с помощью метода map. Каждое число обернуто в элемент li, и ему присваивается уникальный ключ index.


Вы можете использовать этот компонент в любом другом компоненте, например в основном компоненте вашего приложения:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
import React from "react";
import RandomNumbers from "./RandomNumbers";

const App = () => {
  return (
    
      Random Numbers
      
    
  );
};

export default App;


После этого, при запуске вашего приложения, у вас появится кнопка "Generate Random Numbers", и при нажатии на нее будет выводиться список случайных чисел, отсортированных по возрастанию.