Как исправить перевод, содержащий состояние, которое изменилось на «интервал» (React) - PullRequest
Новая
       13

Как исправить перевод, содержащий состояние, которое изменилось на «интервал» (React)

0 голосов
/ 24 декабря 2018

У меня есть процедура для таймера для анимации.Я хочу сделать анимацию логотипов вроде https://stripe.com/us/customers. Но у меня бесконечная загрузка страницы, поэтому она не работает.

Я пытался использовать процедуру в разных частях кодаи попытался изменить интервал для лучшей оптимизации (я думаю, что мой компьютер не может работать с интервалом в 1 мс), но это не помогло мне.

Все это из одного файла.Состояние: 

class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      submitError: false,
      width: 0,
      height: 0,
      timer: 0
    };

Процедура: 

 TimeForLogos() {
   const time = setInterval(() => {
   const passedTime = this.state.timer + 0.1;

   if (passedTime === 20) {
     clearInterval(time);
   }
   this.setState({
     timer: passedTime,
   });
  }, 100);
 }

Я пытаюсь использовать его в рендере (мне нужно, чтобы процедура начиналась при открытии сайта) и пытаюсь сделать кнопку (я думалэто поможет мне решить проблему бесконечной загрузки).Итак, часть кода от render на данный момент: 

<div className={s.logos}>
  <span onClick={this.TimeForLogos()}>go</span>
      {LogoData.map(logo => (
        <div
          className={s.logo}
          style={{
            right: `${logo.positionX}px`,
            top: `${logo.positionY}px`,
            width: logo.width * 1.1,
            padding: `${(logo.width - logo.height) / 2} 0`,
            transform: `translate(${this.state.timer * 10}px,0) scale(1)`,
          }}
        >
          <img
            src={logo.img}
            alt=""
            style={{
              width: logo.width,
              height: logo.height,
            }}
          />
        </div>
     ))}
</div>

Итак, вопрос.Как я могу обновить свой код, чтобы он работал?И мне нужно сделать так, чтобы процедура работала при открытии сайта (анимация должна воспроизводиться при открытии сайта).Как я могу это сделать?

Ответы [ 2 ]

0 голосов
/ 26 декабря 2018

Я обновил что-то в коде предыдущего комментатора.Я делаю все в одном классе (дома).Я делаю JSON файл для логотипов и информации, содержащейся в этом файле.Так что это мой код.

class Home extends React.Component {
 constructor(props) {
 super(props);
 this.state = {
  translateX: 0,
 };}

 render() {
setInterval(() => {
  let { translateX } = this.state;
  translateX -= 2;
  if (translateX < -1800) {
    translateX = 0;
  }
  this.setState({
    translateX,
  });
}, 1000);

        <div className={s.logos}>
      {LogoData.map(logo => (
        <div
          className={s.logo}
          style={{
            left: `${logo.positionX}px`,
            top: `${logo.positionY}px`,
            width: logo.width * 1.1,
            padding: `${(logo.width - logo.height) / 2} 0`,
            transform: `translate(${this.state.translateX}px,0) scale(1)`,
          }}
        >
          <img
            src={logo.img}
            alt=""
            style={{
              width: logo.width,
              height: logo.height,
            }}
          />
        </div>
      ))}
    </div>
0 голосов
/ 24 декабря 2018

Вы можете создать отдельный компонент и обработать переход каждого компонента в функции времени ожидания. 

class Home extends Component {
  constructor(props) {
    super(props);
    this.logoData = [{
      width: 100,
      height: 100,
      text: "text1"
    }, 
    {
      width: 100,
      height: 100,
      text: "text2"
    }, 
    {   width: 100,
        height: 100,
        text: "text3"
    }];

  }


  render() {
    return (
       <div className="mainContainer">
       {this.logoData.map(item => <MovingDiv {...item}/>)}
       </div>
    );
  }
}

Создание еще одного компонента реакции, скажем MovingDiv. 

class MovingDiv extends Component {

    constructor(props) {
        super(props);
        this.state = {
            translateX: 0,
            translateY: 0,
            scale: 0
        }
    }

    componentDidMount() {
        const intervalLimit = setInterval(() => {
            let { translateX, translateY} = this.state;
            // logic of setting translateX goes here
            if(--translateX < -300) { // -300 is just for example
                translateX = 0;
            }
            this.setState({
                translateX
            })
        }, 200)
    }
    /* will move the divs towards right every 200ms*/
    render() {
        return(<div style={{ width: this.props.width, height: this.props.height, transform: `translate(${this.state.translateX}px, 0px)`}}>{this.props.text}</div>);
    }
}

Надеюсь, это поможет!

...