我有这个数组,我想迭代。我需要在下一个之前延迟几秒钟。
{this.props.things.map((thing, index) => { return ( <div key={index}>{thing.content}</div> // Delay 1 second here ) })}
此数组的初始状态始终不止一个。为了实现UI,我希望它们一一加载到DOM中。
react的呈现功能是同步的。javascript映射也是同步的。因此,在这里使用计时器不是正确的解决方案。
但是,您可以在组件状态下跟踪已渲染的项目,并使用javascript计时器更新该状态:
示例实现看看这个小提琴:
React.createClass({ getInitialState() { return { renderedThings: [], itemsRendered: 0 } }, render() { // Render only the items in the renderedThings array return ( <div>{ this.state.renderedThings.map((thing, index) => ( <div key={index}>{thing.content}</div> )) }</div> ) }, componentDidMount() { this.scheduleNextUpdate() }, scheduleNextUpdate() { this.timer = setTimeout(this.updateRenderedThings, 1000) }, updateRenderedThings() { const itemsRendered = this.state.itemsRendered const updatedState = { renderedThings: this.state.renderedThings.concat(this.props.things[this.state.itemsRendered]), itemsRendered: itemsRendered+1 } this.setState(updatedState) if (updatedState.itemsRendered < this.props.things.length) { this.scheduleNextUpdate() } }, componentWillUnmount() { clearTimeout(this.timer) } })