代码之家 › 专栏 › 技术社区 › Jaeger

当单击反应路由器链接时,如何将状态传输到父组件?

react-transition-group react-router reactjs javascript

3

Jaeger · 技术社区 · 6 年前

我想构建一个可用于转换的单页应用程序,如下所示:

*------*--------------*-----------*
|      |              |           |
| 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 /> 对于每一种可能性,我真的不知道。

我的问题是我需要告诉你 <C绞合/> 或者单击了什么,或者(更好的)需要显示什么转换。

为此,我试图设置 transition 状态,但是它看起来更新得太多了,我对反应的知识已经不多了,我不知道如何用反应路线来处理这些。

更新

谢谢大家的回答,很抱歉回答得不够快,我的电脑快冻死了。

所以我创建了一个新班级 CSSTransitions 我复制/粘贴了@brandon的答案,同时根据我的需要进行调整。但是,我有一个问题 componentWillReceiveProps(nextProps) ,因为它nextrops.location为空,所以不知何故,不会传递react路由器的上下文。

我更新了我的密码箱, C绞合 类位于“src”目录内的“utils”目录中。

再次感谢你的回答

提前谢谢你

2 回复 | 直到 6 年前

1

3

Brandon 6 年前

我的建议是让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);

2

Ed de Almeida 6 年前

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 object data- attributes

了解更多关于这些的信息 data- HTMLElement.dataset 你可以读 this