3

我想构建一个与转换一起使用的单页应用程序，如下所示：

*------*--------------*-----------*
|      |              |           |
| Shop | Landing Page | Biography |
|      |              |           |
*------*--------------*-----------*
|                                 |
|          Contact page           |
|                                 |
*---------------------------------*

基本上，当您第一次访问网站时，您会到达登录屏幕。从那里，有 3 个链接可用，“传记”、“商店”和“联系方式”（“联系方式”可从三个“顶部”页面获得）。

单击链接转到“商店”或“传记”后，您可以返回登录页面或转到联系页面，但不能转到“相反”页面（因此是架构）。此外，当您进入联系页面并单击“返回”时，您将回到之前的最后一页。

我创建了一个CodeSandBox以避免粘贴半公里的代码，这些代码与此无关但仍然有点担心

所以我希望能够精确地设置我的过渡，比如去“传记”时从左到右（离开时相反）​​，去“商店”时从右到左，去到时从下到上联系表格。

在阅读了大量关于 的问题和文档后react-transition-group，我想到了做这样的事情：

// src/App.js
const PageFade = props => (
  // props.transition would contain "topBottom", "bottomTop", "leftRight" and "rightLeft" 
  // (so that I would ajust my CSS in consequence)
  {props.transition === 'topBottom' &&
  <CSSTransition
    {...props}
    classNames={props.transition !== null && props.transition}
    timeout={1000}
    mountOnEnter={true}
    unmountOnExit={true}
  />
  }
);
}

我可以这样做或<CSSTransition />为每种可能性创建一个，我真的不知道。

我的问题是我需要告诉它<CSSTransition />点击了什么或（更好地）它需要显示什么过渡。

为此，我尝试设置一个transition状态，但它看起来更新得太多了，而且我对 React 的了解也很生疏，我不知道如何使用 react-route 来处理这一切。

更新

谢谢大家的回答，也很抱歉没有更快地回答，我的电脑快死了。

因此，我创建了一个新课程CSSTransitions，在其中复制/粘贴了@brandon 的答案，同时适应了我的需求。但是，我有一个问题componentWillReceiveProps(nextProps)，因为它 nextProps.location 为空，不知何故，react-router 的上下文没有通过。

我更新了我的 CodeSandBox，CSSTransitions该类位于“src”目录内的“utils”目录中。

再次感谢您的回答

先感谢您

4

2 回答 2

3

我的建议是让您的 PageFade 组件监视路线并将以前的路线与新路线进行比较，并根据路线的变化改变其方向。这是一个粗略的例子：

import {withRouter} from 'react-router';

const directions = {
  "/->/contact": "top-bottom",
  "/contact->/": "bottom-top",
  // etc...
}

class PageFadeDumb extends React.Component {
  state = {direction: "top-bottom"};

  componentWillReceiveProps(nextProps) {
    if (nextProps.location.pathname !== this.props.location.pathname) {
      const transitionPath = `${this.props.location.pathname}->${nextProps.location.pathname}`;
      const newDirection = directions[transitionPath] || "top-bottom";
      console.log(`newDirection = ${newDirection}`);
      this.setState({direction: newDirection});
    }
  }

  render() {
    const direction = this.state.direction;
    // use here somehow?
    return (
      <CSSTransition
        {...(this.props)}
        classNames="fadeTranslate"
        timeout={1000}
        mountOnEnter={true}
        unmountOnExit={true}
      />
    );
  }
}

const PageFade = withRouter(PageFadeDumb);
于 2018-06-15T13:22:33.047 回答
2

我会这样做：

class ParentComponent extends React.Component {

  state = {
    some_state: ""
  }

  myCallback = (ev) => {
    this.setState({ some_state: ev.target.dataset.mydata });
  }

  render() {
    <ChildComponent cback={this.myCallback} />  // Insert all other props too
  }

}

class ChildComponent extends React.Component {

  render() {
    <button data-mydata="Value you need to pass up" onClick={this.props.cback}>
      Click me
    </button>
  }

}

单击按钮时，ParentComponent会触发中定义的回调并接收一个Event 对象，然后您可以使用data- 属性捕获一个或多个值。

要了解有关这些data-属性的更多信息，HTMLElement.dataset您可以阅读此内容。

于 2018-06-15T13:17:04.480 回答