arrays - React JS映射一个数组，每个项目都被延迟

我有一个带有HTML元素的React JS数组，它可以很好地工作。问题是我的目标是显示延迟渲染的数组。像：

第一个元素立即生效，

第二个元素+ 500ms

第三个元素+ 1000ms（第二个元素+ 500ms）

第四个元素+ 1500ms

依旧......

示例代码：

import React from 'react';
import { render } from 'react-dom';
import Hello from './Hello';

const styles = {
  fontFamily: 'sans-serif',
  textAlign: 'center',
};

function example(){
  let arr = [1,1,1,2,3,4]
  const res = arr.map((e,i) => 
setTimeout(() => {
  e === 1 ?
   <p>{e}</p> 
   :
  <p> Not one </p>
  },1000))
  return res
}


const App = () => (
  <div style={styles}>
    <Hello name="CodeSandbox" />
    {example()}
  </div>
);

render(<App />, document.getElementById('root'));

当我在函数中添加setTimeout时，它只返回数字而不是HTML元素。

或者我可以使用SetInterval和state来做这件事，但想知道是否有这样的解决方案。

此致

React JS映射一个数组，每个项目都被延迟

0 个答案: