Div没有显示但在React中有数字

Question

以下是UI，其中我试图在1秒延迟后显示的每个框 - （Box1,1秒延迟，Box2,1秒延迟，Box3 ..so）

相反，我得到 -

我的React代码，让我知道我在这里做错了什么以及为什么显示数字 -

const CreateBox = (props) => {
  return (
    <>
    {/*<div className="box">{props.num}</div>*/}
    <div className="box"></div>
    </>
  )
} 

const App = () => {
  return (
    <div className="app">
      <h3>App</h3>
      {
        [1,2,3,4,5,6,7,8,9,10].map((item) => {
          return setTimeout(() => {
            // return (<CreateBox num={item} />)
            return (<CreateBox />)
          }, 1000)
        })
      }
    </div>
  )
}

const root = document.querySelector('#root')
ReactDOM.render(<App />, root)

Codepen - https://codepen.io/anon/pen/pBLPMY

Answer 1

您可以在componentDidMount中创建一个间隔，并在您的状态中递增一个数字，直到它达到10并在您的渲染方法中使用此数字，而不是为每个渲染中的数组中的每个元素创建新的超时。

例

class App extends React.Component {
  state = {
    count: 0
  };

  componentDidMount() {
    const interval = setInterval(() => {
      this.setState(
        ({ count }) => ({ count: count + 1 }),
        () => {
          if (this.state.count === 10) {
            clearInterval(interval);
          }
        }
      );
    }, 1000);
  }

  render() {
    return (
      <div className="app">
        <h3>App</h3>
        {Array.from({ length: this.state.count }, (_, index) => (
          <CreateBox key={index} num={index + 1} />
        ))}
      </div>
    );
  }
}

const CreateBox = props => {
  return <div className="box">{props.num}</div>;
};

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Answer 2

const CreateBox = (props) => {
  return (
   <div className="box">{props.num}</div>
  )
} 

const App = () => {
  return (
    <div className="app">
      <h3>App</h3>
      {
        [1,2,3,4,5,6,7,8,9,10].map((item) => {              
             return (<CreateBox num={item} />)
        })
      }
    </div>
  )
}
const root = document.querySelector('#root')
ReactDOM.render(<App />, root)

Answer 3

循环时不要使用setTimeout。而是使用state在CreateBox组件内设置计时器。如果删除超时，您可以看到框。要处理延迟，请将索引* 1000作为每个元素的计时器传递。

Answer 4

class CreateBox extends React.Component {
  state = {
    opacity: 0
  }

  constructor(props){
    super(props)
  }
  
  componentDidMount(){
    setTimeout(()=> this.setState({opacity: 1}),`${this.props.time}000`)  
  }
  
  render() {
    console.log(this.props)
    return (
      <div style={this.state} className="box">{this.props.num}</div>
    )
  }
};

const App = () => {
  return (
    <div className="app">
      <h3>App</h3>
      {
        [1,2,3,'w',5,6,7,8,9,10].map((item, index) => <CreateBox num={item} time={index}/>)
        
      }
    </div>
  )
}

const root = document.querySelector('#root')
ReactDOM.render(<App />, root)