React Native - Как повторить компонент в jsx через l oop? - PullRequest
Новая
       3

React Native - Как повторить компонент в jsx через l oop?

0 голосов
/ 30 марта 2020

Я пытаюсь создать для l oop в jsx - реагировать родной, но мне не удалось. Все мысли заставляют меня использовать map, но у меня нет массива для l oop через него через map. 

const num = 5;

Я хочу способ повторения компонента (например, : Кнопка) определенное время (в данном случае 5 раз). 

<Button title="help" onPress={doSomething} />

Ответы [ 2 ]

0 голосов
/ 30 марта 2020

вы можете использовать 

const myArray = Array.from({length: 5}, (e, i) => i + 1);

, чтобы создать массив с 5 элементами, затем вы можете l oop его с 

{myArray.map(item) => (<Button key={item} title="help" onPress={doSomething} />)}
0 голосов
/ 30 марта 2020

Array(5).fill() создаст массив длиной 5 со значениями undefined, но вы можете легко отобразить его в JSX. 

const onClickHandler = index => () => console.log(`Button ${index} clicked`);

ReactDOM.render(
  <div>
    {Array(5).fill().map((_, index) => (
      <button
        type="button"
        onClick={onClickHandler(index)}
      >
        Button {index}
      </button>
    ))}
  </div>,
  document.getElementById("root")
);
<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>

<body>
  <div id="root"></div>
</body>
...