Reactjs + как создать ряд элементов, которые вводятся через ввод

у меня есть

state = {number : 1}

который обновляется через форму

и я хочу каждый раз добавлять столько <div />, сколько указано.

Я думаю, что держать div в состоянии было бы неправильно, потому что я не смогу использовать виртуальную DOM, но я не могу придумать альтернативы

Также я не хочу обновлять всю DOM, а лучше сравнивать предыдущее и добавлять или удалять в соответствии с новым состоянием

reactjs

07.04.2018 11:46

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете сгенерировать массив значений с длиной, равной номеру состояния:

state = { number: 1 }

get numbers () {
  return Array.from({ length: this.state.number }, (i, _) => _)
}

increment = () => {
  this.setState({ number: this.state.number + 1 })
}

Затем визуализируйте div с помощью обычной карты:

{this.numbers.map(index => (
   <div onClick = {this.increment}>{index}</div>
))}

Демо:https://codesandbox.io/s/p9w264zklx

07.04.2018 11:56

Другие вопросы по теме

Невозможно создать проект React.js в WebStorm

В ReactJS как интегрировать основные и локальные (специфичные для проекта) компоненты в виде плагина

Изменение состояния дочернего компонента (свойства css)

Сохраните DOM в переменной в ReactJS

React router component props не принимает компонент <Link />?

React Native, выравнивая взгляды по вертикали, не устанавливая для него значение

Реагировать: как сохранить состояние компонента после его скрытия

Повторный рендеринг React Router при использовании стрелочной функции

Как исправить параметр запроса NextJs, который не работает при статическом экспорте?

Сцена перенаправляется, потому что предыдущая сцена получает обновленное состояние

Reactjs + как создать ряд элементов, которые вводятся через ввод

Ответы 1

Другие вопросы по теме

Похожие вопросы