Question

我有两个不同的链接。一个是主页，另一个是画廊。我在主页3上有方法scrollIntoView onClick的链接，这些链接将我带到不同的部分。我想实现将我从画廊组件重定向到主页的方法，并在完成后调用方法scrollIntoView。

goToContact方法：

goToContact = e => {
    if (window.location.pathname === "/fotobudka/") {
      this.fbContactElement.scrollIntoView({
        behavior: "smooth",
        block: "start"
      });
    }
    if (window.location.pathname !== "/fotobudka") {
      this.changeUrl();
      this.goto();
    }
  };

更改网址将我重定向到主页：

changeUrl() {
    return <Redirect to="/fotobudka/" />;
  }

完成后：

goto = () => {
    setTimeout(() => {
      let fbContactElement = document.getElementById("contact-form");
      fbContactElement.scrollIntoView({
        behavior: "smooth",
        block: "start"
      });
    }, 100);
  };

我的方法运行完美，但是我知道SetTimeout不是一个好的解决方案。我已经尝试过异步/等待，但我认为我不足以实现这一点。

如何在不使用SetTimeout函数的情况下重构它？

Answer 1

您必须使用setState设置将在render（）方法内部呈现的属性。

class MyComponent extends React.Component {
  state = {
    redirect: false
  }

  goTo = () => {...}

  goToContact = e => {
    this.setState({ redirect: true },
    ()=>goto());
  }

  render () {
    const { redirect } = this.state;

    if (redirect) {
      return <Redirect to='/fotobudka'/>;
    }

    return (...)
  }
}

您还可以在官方文档中查看示例：https://reacttraining.com/react-router/web/example/auth-workflow

Answer 2

可以在装入组件时使用componentDidMount()生命周期挂钩执行一些代码。但是您必须通过传递诸如doScroll=true之类的查询参数来避免无限的更新周期。现在，您只需在componentDidMount()挂钩中检查查询参数并执行滚动功能

Answer 3

我解决了我的问题，在一个论坛中，我检查了通过时间间隔可以检查页面上是否已存在该项目。在React中，它看起来像这样：

goto = selector => {
if (window.location.pathname !== "/fotobudka/") {
  this.constructor.changeUrl();
}
let checkExist = setInterval(() => {
  let element = document.getElementById(selector);
  if (element) {
    element.scrollIntoView({
      behavior: "smooth",
      block: "start"
    });
    clearInterval(checkExist);
  }
}, 100);
};

static changeUrl() {
  return <Redirect to="/fotobudka/" />;
}

反应-重定向后的调用方法

3 个答案: