Question

编辑：

我尝试过

 <ProgressBar percentage={(percentage / 100) * questions.length} />

但是进度没有得到同等的更新

我的进度条有一个基本的功能组件，看起来像这样

const ProgressBar = props => {
  const { percentage } = props
  return (
    <div className="progress-bar">
      <Filler percentage={percentage} />
    </div>
  )
}

const Filler = props => {
  const { percentage } = props
  return <div className="filler" style={{ width: `${percentage}%` }} />
}

export default ProgressBar

我这样导入到主要组件中

this.state = {
      percentage: 0,
    }

进度条的状态通过手柄单击功能更新

selectAnswer = answer => {
    this.setState(state => ({
      percentage: state.percentage + 20,
      currentQuestionId: state.currentQuestionId + 1,
    }))
  }

我的进度栏现在可以正常使用，每次用户移至下一个问题时，状态都会更新。

我希望进度条的状态能够动态更新，以基于数组的形式显示其当前状态。

questions object
    0: {id: 1, text: "What is your favourite number?", type: "multiChoice", choices: Array(3)}
    1: {id: 2, text: "What is your favourite colour?", type: "multiChoice", choices: Array(3)}
    2: {id: 3, text: "Which workshop would you prefer?", type: "cardChoice", choices: Array(2)}
    3: {id: 4, text: "Rank your favourite movie from Top to Bottom", type: "rankChoice", choices: Array(5)}
    4: {id: 5, text: "The end.", type: "end"}

例如，如果currentQuestionId === 2，则this.state.percentage会反映出来，或者，如果currentQuestionId ==== 5，则此state.percentage为100

根据数组长度显示进度条组件的状态

0 个答案: