Question

如何使用scrollTo中的react-springy-parallax？

我尝试在简单的投资组合页面中使用react-springy-parallax，您可以点击弹性视差滚动到下一页但我希望能够使用导航链接，这里是如何应用程序布局：

App.js

class App extends React.Component {
  constructor() {
    super()
    this.ref = 'parallax'
  }
  render() {
    return (
      <div>
        <Parallax ref={this.ref} pages={4}>

          <Parallax.Layer
            offset={0}
            speed={0.5}
            onClick={() => this.refs.parallax.scrollTo(1)}
          >
            <Nav />
            <Header />
          </Parallax.Layer>
          ...

因此onClick只是滚动到下一页，我希望能够在我的Nav组件中点击About链接，它会滚动+1所以{{ 1}}

这是导航组件：

Nav.js

scrollTo(1)

我确实尝试将class Nav extends React.Component { render() { return ( <div className="nav"> <ul className="links"> <li> <a href="#about">About</a> </li> ...命名导出从scrollTo导入导航组件，但在Chrome开发控制台中出现错误，说它不是函数

我现在正在尝试使用点击处理程序：

react-springy-parallax

但我不知道如何回复class Nav extends React.Component { render() { function handleClick(e) { e.preventDefault() console.log(e) } return ( <div className="nav"> <ul className="links"> <li> <a href="#" onClick={handleClick} > About </a> </li> ...致电App.js

有人有什么想法吗？

Answer 1

logged an issue with the repo owner他非常友好地提出了一些建议：

使用contextTypes从scrollTo

访问parallax方法

在Nav组件中使用：

Nav.contextTypes = { parallax: React.PropTypes.object }

这将允许您使用scrollTo方法

类似的东西：

class Nav extends React.Component {
  render() {
    return (
      <div className="nav">
        <ul className="links">
          <li>
            <a
              href=""
              onClick={this.context.parallax.scrollTo(0)}
            >
              Home
            </a>
          </li>
          <li>
            <a
              href=""
              onClick={this.context.parallax.scrollTo(1)}
            >
              About
            </a>
          </li>

您也可以将该功能作为道具传递，如下所示：

class App extends React.Component {
  constructor(props) {
    super(props)
    this.handleScroll = value => this.parallax && this.parallax.scrollTo(value)
  }
  render() {
    return (
      <div>
        <Parallax
          ref={ref => (this.parallax = ref)}
          pages={4}
        >

        <Parallax.Layer
          offset={0}
          speed={0.5}
          onClick={() => this.handleScroll(1)}
        >
          <Nav handleScroll={this.handleScroll} />

然后从Nav组件使用道具onClick={() => this.props.handleScroll(PAGE)}，其中PAGE是您要滚动到的页码。

如何使用react-springy-parallax

1 个答案: