@hateyyyy

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

Глупейший вопрос,но не могу решить проблему.
Если был бы массив это делается так
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 ругается
Как решается эта ситуация?
Заранее спасибо
  • Вопрос задан
  • 2769 просмотров
Решения вопроса 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>
    )
  }
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
RubaXa
@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>;
}
Ответ написан
Комментировать
@WapGeaR
Программист
Лучший выбор - это 2 компонента.
Просто сделайте родительский, а рядом с ним поместите его child и выводите инфу в нем. В родительском же вызывайте в цикле свой child и проблемы не будет. Так правильнее.
Ответ написан
Комментировать
keslo
@keslo
У вас скорее всего данные блоки не пустые будут, а с каким-то содержимым?
В таком случае передавайте вновь полученные данные в props компонента, а уже внутри него при помощи map набирайте компонентов сколько необходимо.

Это я практически рассказал о примере, который вы сами привели в качестве рабочего.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы