Question

我正在使用TransitionGroup组件来提供页面转换效果，当用户通过类似旅程的界面移动时，可以将现有组件换成新组件。

const { stepId, children } = this.props;

<TransitionGroup className="journey">
    <CSSTransition
        timeout={300}
        classNames="journey-step"
        unmountOnExit
        key={stepId}>
        <div className="journey-step">
            {children}
        </div>
    </CSSTransition>
</TransitionGroup>

这一切都很好，除了孩子们需要在他们出现时立即触发一些工作。显而易见的解决方案是在挂载（使用componentDidMount()或类似工具）上启动此工作，但是在某些情况下，这会导致UI在发生过渡效果的同时进行更新，并导致令人不快的UX。

理想情况下，孩子在完全过渡到视图之前不会开始做任何事情。 CSSTransition公开了一个onEntered事件，这是开始处理的完美触发，但是我想不出一种将此事件与孩子联系起来的好方法。

我正在使用ReactJS 16.2；也许我可以使用一些较新的选项？

此容器希望与托管在其中的子容器无关，因此我正在寻找一种解决方案，以使对它感兴趣的子组件可以使用过渡事件。

Answer 1

Use the React Context Api

这是您的方案的示例用法。我不知道TransitionGroup的工作方式，因此这可能对您不起作用。在这里，我向下传递stepId，只要在过渡完成后更改stepId，它将可以使用。如果不是，您将要在onEntered事件中更新某些组件状态，并将其传递给下一个状态。

// Create a context
const JourneyContext = React.createContext();

// Use the provider to pass the stepId down
const { stepId, children } = this.props;

<JourneyContext.Provider value={stepId}>
  <TransitionGroup className="journey">
    <CSSTransition
      timeout={300}
      classNames="journey-step"
      unmountOnExit
      key={stepId}>
      <div className="journey-step">
        {children}
      </div>
    </CSSTransition>
  </TransitionGroup>
</JourneyContext.Provider>

// If your child is a functional component you can use the useContext hook to get the current stepId
const stepId = useContext(JourneyContext);
if (stepId === THIS_STEP) {
  // Do something...
}

// If your child is a class then you can access the context in the render method like this:
render() {
  return (
    <JourneyContext.Consumer>
      {stepId => {
        if (stepId === THIS_STEP) {
          // Do something...
        }
      }}
    </JourneyContext.Consumer> 
  );
}

如果子组件是一个类，并且需要在生命周期方法中使用上下文值，则可以use a contextType。但是我建议如果可能的话使用钩子方法。

通知TransitionGroup中的过渡状态的子组件

1 个答案: