Как в React осуществить render в цикле?

Question

[hateyyyy]

Глупейший вопрос,но не могу решить проблему.
Если был бы массив это делается так

render() {
        return(
            <div >
                {this.props.list.map(function(city) {
                    return <div></div>
                }.bind(this))}
        </div>
        )
    }

А что делать,если у меня есть интервал и я хочу по порядку цифры отрисовать,типо такого

render() {
        return(
            <div >
                for(let i = 0; i <2 ; i++) {
                    return<div>{i}</div>
                }
        </div>
        )
    }

Но с for не работает,webpack ругается
Как решается эта ситуация?
Заранее спасибо

Answer 1

[Никита Гущин]

Вам нужно не внутри компонента с интервалом рендерить а снаружи перерисоввывать компонент, передавая разные props
Самый упрощенный вариант:

class MyContainer extends Component {
  constructor() {
    this.state = { nums: [] }
  }
  
  componentDidMount() {
    this.intervalId = setInterval(() => {
      this.setState({
        nums: [
          ...this.state.nums,
          (this.state.nums[this.state.nums.length-1] || 0) + 1
        ],
      })
    }, 1000)
  }

  componentWillUnmount() {
    clearInterval(this.intervalId)
  }

  render() {
    retrurn (
      <div>
       {this.state.nums.map((n, i) => (<b key={i}>Number is: {n}</b>)}
      </div>
    )
  }
}

Comments

[hateyyyy]

Спасибо

[hateyyyy]

Поспешил я немного,в данном же примере просто будут показывать числа,а мне нужно,чтоб они как элементы оставались на странице,то есть 5 дивов например

[Никита Гущин]

hateyyyy: изменил ответ

Answer 2

[RubaXa]

render() {
  return (
    <div>
       ${Array.from({length: 5}).map((_, idx) => <div>{idx}</div>)}
    </div>
  );
}

// или

render() {
  const list = [];
  for (let idx = 0; idx < 5; idx++ ){
     list.push(<div>{idx}</div>);
  }
  return <div>${list}</div>;
}

Answer 3

[Антон Измайлов]

Лучший выбор - это 2 компонента.
Просто сделайте родительский, а рядом с ним поместите его child и выводите инфу в нем. В родительском же вызывайте в цикле свой child и проблемы не будет. Так правильнее.

Answer 4

[keslo]

У вас скорее всего данные блоки не пустые будут, а с каким-то содержимым?
В таком случае передавайте вновь полученные данные в props компонента, а уже внутри него при помощи map набирайте компонентов сколько необходимо.

Это я практически рассказал о примере, который вы сами привели в качестве рабочего.