我需要一种方法来使组件有条件地呈现

Question

我还是新手，我正在制作决策树，我得到了要渲染的按钮并让它们向下移动到下一个问题，但现在我希望它跳转到数组的某些部分，具体取决于如何他们回答（对或错）。

例如，如果他们回答 yes(true)，我希望问题 [0] 跳转到 [6] 作为响应

我正在考虑尝试使用 if then 语句，只是不确定我的代码是否会使它变得更难或更容易。

  const questions = [
    {
      questionText: "Is the account data entry?",
      answerOptions: [
        {answerText: "No", isCorrect: false},
        {answerText: "Yes", isCorrect: true},
      ],
    },
    {
      questionText: "Is this customer 1 or 2?",
      answerOptions: [
        {answerText: "No", isCorrect: false},
        {answerText: "Yes", isCorrect: true},
      ],
    },
    {
      questionText: "Is it someone with a Power of Attorney or Conservatorship for the Customer?",
      answerOptions: [
        {answerText: "No", isCorrect: false},
        {answerText: "Yes", isCorrect: true},
      ],
    },
    {
      questionText: "Is it someone with a signed 'Name Add Form' on file?",
      answerOptions: [
        {answerText: "No", isCorrect: false},
        {answerText: "Yes", isCorrect: true},
      ],
    },
    {
      questionText: "Is it someone who is verbally authorized by a verified account holder to speak?",
      answerOptions: [
        {answerText: "No", isCorrect: false},
        {answerText: "Yes", isCorrect: true},
      ],
    },
    { //this is object number 5
      questionText: "VERIFIED",
      answerOptions: [

      ],
    },
    { //this is object number 6
      questionText: "You can tell the customer their verbal password.",
      answerOptions: [

      ],
    },
  ]

  const [currentQuestion, setCurrentQuestion] = useState(0);

  const handleAnswerButton = () => {
    const nextQuestion = currentQuestion + 1;
    setCurrentQuestion(nextQuestion);
  }

  return (  
    <div className="App">
      <h1>{questions[currentQuestion].questionText}</h1>
      
      <div className="answerSection">
        {questions[currentQuestion].answerOptions.map((answerOption)=> (
        <button onClick={handleAnswerButton}>{answerOption.answerText}</button>
        ))}
      </div>
    </div>
  );
}

Answer 1

您可以将此数据存储在questions 对象中。例如

{
  questionText: "Is the account data entry?",
  answerOptions: [
    {answerText: "No", isCorrect: false},
    {answerText: "Yes", isCorrect: true, jumpToQuestion: 6}, // <====
  ],
},

然后

  const handleAnswerButton = (jumpToQuestion) => {
    const nextQuestion = jumpToQuestion || currentQuestion + 1;
    setCurrentQuestion(nextQuestion);
  }
.
.
.
    <button onClick={ () => {
      handleAnswerButton(answerOption.jumpToQuestion)
      }}
    >{answerOption.answerText}</button>

Answer 2

如果您需要根据所选选项实现决策树，则可以将下一个问题详细信息映射到相应选项。

在 answerOption 对象中添加 nextQuestionIndex 参数。

const questions = [
    {
      questionText: "Is the account data entry?",
      answerOptions: [
        {answerText: "No", isCorrect: false, nextQuestionIndex: 1},
        {answerText: "Yes", isCorrect: true, nextQuestionIndex: 6},
      ],
    }
]

并修改handleAnswerButton 函数以接收answerOption 对象作为输入。根据所选选项的nextQuestionIndex，导航到相应的问题

const handleAnswerButton = (answerOption) => {
    const nextQuestion = answerOption.nextQuestionIndex;
    setCurrentQuestion(nextQuestion);
}

修改onClick函数，将answerOption作为参数传递，

<div className="answerSection">
        {questions[currentQuestion].answerOptions.map((answerOption)=> (
        <button onClick={()=>handleAnswerButton(answerOption)}>{answerOption.answerText}</button>
        ))}
</div>

完整的工作代码，

import React, {useState} from "react";

export default function App() {

  const questions = [
    {
      questionText: "Is the account data entry?",
      answerOptions: [
        {answerText: "No", isCorrect: false, nextQuestionIndex: 1},
        {answerText: "Yes", isCorrect: true, nextQuestionIndex: 6},
      ],
    },
    {
      questionText: "Is this customer 1 or 2?",
      answerOptions: [
        {answerText: "No", isCorrect: false, nextQuestionIndex: 2},
        {answerText: "Yes", isCorrect: true, nextQuestionIndex: 2},
      ],
    },
    {
      questionText: "Is it someone with a Power of Attorney or Conservatorship for the Customer?",
      answerOptions: [
        {answerText: "No", isCorrect: false, nextQuestionIndex: 3},
        {answerText: "Yes", isCorrect: true, nextQuestionIndex: 3},
      ],
    },
    {
      questionText: "Is it someone with a signed 'Name Add Form' on file?",
      answerOptions: [
        {answerText: "No", isCorrect: false, nextQuestionIndex: 4},
        {answerText: "Yes", isCorrect: true, nextQuestionIndex: 4},
      ],
    },
    {
      questionText: "Is it someone who is verbally authorized by a verified account holder to speak?",
      answerOptions: [
        {answerText: "No", isCorrect: false, nextQuestionIndex: 5},
        {answerText: "Yes", isCorrect: true, nextQuestionIndex: 5},
      ],
    },
    { //this is object number 5
      questionText: "VERIFIED",
      answerOptions: [
        {answerText: "No", isCorrect: false, nextQuestionIndex: 6},
        {answerText: "Yes", isCorrect: true, nextQuestionIndex: 6},
      ],
    },
    { //this is object number 6
      questionText: "You can tell the customer their verbal password.",
      answerOptions: [
        {answerText: "No", isCorrect: false, nextQuestionIndex: 6},
        {answerText: "Yes", isCorrect: true, nextQuestionIndex: 6},
      ],
    },
  ]

  const [currentQuestion, setCurrentQuestion] = useState(0);

  const handleAnswerButton = (answerOption) => {
    const nextQuestion = answerOption.nextQuestionIndex;
    setCurrentQuestion(nextQuestion);
  }


  return (
    <div className="App">
      <h1>{questions[currentQuestion].questionText}</h1>
      
      <div className="answerSection">
        {questions[currentQuestion].answerOptions.map((answerOption)=> (
        <button onClick={()=>handleAnswerButton(answerOption)}>{answerOption.answerText}</button>
        ))}
      </div>
    </div>
  );
}