單擊react-router Link時，如何將狀態傳輸到父組件？

Question

我想構建一個與轉換一起使用的單頁面應用程序，如下所示：

*------*--------------*-----------*
|      |              |           |
| 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是null，不知何故，react-router的上下文沒有被傳遞。

我更新了我的CodeSandBox， CSSTransitions類位於'src'目錄下的'utils'目錄中。

再次感謝您的回答

先感謝您

Answer 1

我的建議是讓你的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);

Answer 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-attributes捕獲一個或多個值。

要了解有關這些data-屬性和HTMLElement.dataset更多信息，您可以閱讀此內容 。