Div 不显示，但在 React 中显示数字

Question

以下是 UI，其中我尝试在延迟 1 秒后显示的每个框 -（框 1，延迟 1 秒，框 2，延迟 1 秒，框 3 ..等等）

相反，我得到 -

我的 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

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

Answer 2

您可以在 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 3

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)

Answer 4

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)

Div 不显示，但在 React 中显示数字

Div not showing but numbers in React

javascript

html

css

reactjs

react-dom