Как вернуть символ n раз, прежде чем элемент отреагирует

#javascript #reactjs #loops #random #character

#javascript #reactjs #циклы #Случайный #символ

Вопрос:

Я хочу добавить случайное количество символов перед элементом, повторить этот элемент 20 раз, с разным количеством символов перед каждым разом. Например:

 function App() {
  return (
    <>
      Hello World! This is time {i}
      // I want to add a random amount of spaces before the h1 tags above. I also want to repeat that h1 tags 20 times with a different amount of spaces before each h1 tag
    </>
  )
}

Примером того, что я хочу вернуть, является

Привет, мир! Это время 1
Привет, мир! Это время 2
Привет, мир! Это время 3
Привет, мир! Это время 4
………
Каждый с разным количеством пробелов.

1. Сгенерируйте случайное число в javascript (т. е. Перед возвратом), затем создайте строку и повторите случайное число.times, вставляя amp;nbsp; каждый раз. Затем поместите эту строку туда, куда вы хотите, в свою структуру элементов с {spacesString} помощью или как бы ни называлась ваша строка

2. И сделайте то же самое, но зацикливаясь, чтобы создать массив H1s.

Ответ №1:

 function HeaderWithLeadingSpacing({ maxSpacing = 20, num }) {
  const rdn = Math.round(Math.random() * maxSpacing);
  const spacing = Array.from(Array(rdn), () => 'u00A0');
  
  return (
    <h1>{spacing}Hello World! This is number {num}</h1>
  )
}

function App() {
  return Array.from(Array(20), (_, i) => (
    <HeaderWithLeadingSpacing
      maxSpacing={10}
      num={i   1}
    />
  ));
}

ReactDOM.render(<App />, document.getElementById('app'))

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>



<div id="app"></div>

Развернуть фрагмент

Если я правильно понял, приведенный выше код должен сделать свое дело.

1. Я не могу выделить место для реквизита char и заставить его работать

2. почему бы и нет? не мог просто сделать char=’amp;nbsp;’

3. ОК. Не могли бы вы обновить свой ответ, потому что я изменил вопрос? Тогда я мог бы принять это, если это сработает.

4. Хорошо, я добавил фрагмент кода, чтобы доказать это. (Мне пришлось использовать React. Фрагмент, поскольку <></> привел к сбою скрипта)

5. Я имел в виду, что в первом теге h1 где-то есть 1, а затем в следующем h1 есть 2 и так далее