Question

我有一个带有3个组成部分的React和Redux应用程序 - 说明，故事和测验 - 每个部分本身有3个部分，所以总共有9个部分。 “说明”有一个按钮，允许用户进入“故事”部分，因此转换非常简单。但是，我有一个在Story组件中的计数器，当它到达零时我需要用它来转换到Quiz组件。这是我的代码

 import React, { Component } from 'react'
 import PropTypes from 'prop-types'

 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
 import { confirmInstructions, enterAnswersMaybeSave, getQuiz, getStory 
 } from '../actions'

 import Instructions from '../components/Instructions'
 import Story from '../components/Story'
 import Quiz from '../components/Quiz/index'

 const App = ({
   errorMessage,
   enterAnswersMaybeSave,
   showInstructions,
   confirmInstructions,
   currentTest,
   kind,
   storyData,
   show,
   timed,
   getQuiz,
   getStory,
   saveQuiz,
   complete,
   enabled,
 }) => {
   if (!currentTest) {
     return (
    <div>
      <p>
        The task is now complete. Thank-you for your time.{' '}
        <a href={window.wordpress.home}>Back to your dashboard</a>.
      </p>
      {errorMessage.length > 0 && <p>{errorMessage}</p>}
    </div>
  )

}
return (
 <div className="test">
   {showInstructions && (
     <Instructions
       currentTest={currentTest}
      confirmInstructions={() => confirmInstructions(currentTest)}
     />
   )}
   {!showInstructions && kind === 'story' && currentTest &&
     (
      <div>
        <Story
          kind='story'
          id={currentTest}
          timed={timed}
          show={show}
          enterAnswers={enterAnswersMaybeSave}
          getQuiz={() => getQuiz(currentTest)}
          complete={complete}


        />
      </div>
       )},
         {!showInstructions && kind === 'quiz' && currentTest &&
         (
           <Quiz
             currentTest={currentTest}
             submit={saveQuiz}
           />
         )}
     </div>
   )
 }


 App.PropTypes = {
   enterAnswersMaybeSave: PropTypes.func,
   showInstructions: PropTypes.bool,
   confirmInstructions: PropTypes.func,
   currentTest: PropTypes.number,
   kind: PropTypes.string, // TODO: enum this
   show: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
   timed: PropTypes.number, // TODO: or undefined
   errorMessage: PropTypes.string,
 }
 function mapStateToProps(state) {
   console.log(state.kind); // state
   console.log(arguments[1]); // undefined
 }
 export default connect(
   state => {
     const getCurrent = state => state.storyData.find(t => t.id == 
 state.currentTest);

 const getCurrentStory = state => state.storyData.find(t => t.kind == 
 'story');
     return {
       showInstructions: state.currentTest && 
 !getCurrent(state).instructions,
       currentTest: state.currentTest,
       kind: state.currentTest && getCurrent(state).kind,
       show: state.currentTest && getCurrent(state).show,
       timed: state.currentTest && getCurrent(state).timed,
       answers: state.currentTest && getCurrent(state).answers,
       errorMessage: state.errorMessage,
       complete: state.complete,
       storyData: state.storyData

     }

   },
   dispatch =>
     bindActionCreators({ enterAnswersMaybeSave, confirmInstructions, 
 getQuiz, getStory}, dispatch)
 )(App)

这是我的行动创作者

   export const getQuiz = payload => ({
        type: GET_QUIZ,
        payload: 'quiz'
      })

这是我的减速机

 import { GET_QUIZ } from '../constants/ActionTypes'
 export default (state = [], action) => {
     if (action.type === 'GET_QUIZ') {
       let newState = { ...state, kind: action.payload};
       console.log(newState)
        return newState;
     } else {
       return state
     }
 }

Answer 1

您可能希望将时间存储在redux商店中，并使用您的计时器触发的操作减少时间。

在条件中使用redux prop作为计时器，以确定是否应显示该组件。这样的事情应该有效：

{this.props.quiz.timer === 0 && renderQuizComponent()}

只要你有一个名为quiz的redux reducer（参见https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options），其值被映射到你的组件的props，以及一个递减计时器并按间隔触发的动作，像：

setInterval(this.props.decrementTimer(), 1000);

我建议你正确地做这件事，根据像MomentJS这样的库来计算实际时间，但我认为这超出了这个问题的范围。

如何在时钟到零后移动到新组件

1 个答案: