Div не отображается, но цифры в React - PullRequest
Новая
       28

Div не отображается, но цифры в React

0 голосов
/ 18 апреля 2019

Ниже приведен пользовательский интерфейс, в котором каждый блок, который я пытаюсь отобразить после 1-секундной задержки - (Box1, задержка 1 секунда, Box2, задержка 1 секунда, Box3 .., так что включен)

image

Вместо этого я получаю -

Wrong image

Мой код 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

Ответы [ 4 ]

3 голосов
/ 18 апреля 2019

Вместо создания нового тайм-аута для каждого элемента в массиве при каждом рендеринге, вы можете создать интервал в 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>
2 голосов
/ 18 апреля 2019 
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)
0 голосов
/ 18 апреля 2019 

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)
0 голосов
/ 18 апреля 2019

Не используйте setTimeout во время цикла.Вместо этого установите таймер внутри компонента CreateBox, используя состояние.Если вы удалите тайм-аут, вы можете увидеть коробки.Для обработки задержки передайте индекс * 1000 в качестве таймера для каждого элемента.

...