Uczę się React robiąc aplikację testową, ale mam problemy w momencie poznania poprawnej odpowiedzi wewnątrz .map części zwrotnej, oto mój kod: const Question = (props) => { /*This part . ...

0
Víctor Donat 25 czerwiec 2021, 09:30

4 odpowiedzi

Najlepsza odpowiedź

Możesz zrobić coś takiego:

const Question = (props) => {
  /*This part randomize the order of answers*/
  let render_order = [2, 5, 4, 3, 7];
  const correct = render_order[0];
  render_order = render_order.sort(function () {
    return Math.random() - 0.5;
  });

  return (
    <div class="question">
      Answer: {correct}{" "}
      {render_order.map((a, index) => {
        return (
          <div className={`option ${a === correct ? "correct" : ""}`}>
            `Question {index + 1}: ${a}`
          </div>
        );
      })}
    </div>
  );
};


class TodoApp extends React.Component {
  constructor(props) {
    super(props)
  }
  
  render() {
    return (
      <div>
        <Question />
      </div>
    )
  }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))

Demo tutaj: https://jsfiddle.net/qfsjczda/1/

Szczęśliwy kodowanie !!!

0
Thinker 26 czerwiec 2021, 03:17

Z twojego pytania rozumiem, że render_order to lista opcji dla pytania.

Render_order.map zmapuje każdy element z Twojej listy na element jsx, który zostanie wyrenderowany.

{render_order.map(a => {
            return <div class='option'> {a} {correct}</div>
})}

W powyższym fragmencie dla każdej opcji możesz również dodać poprawną opcję

Ewentualna aktualizacja polegałaby tylko na renderowaniu opcji, a nie poprawnej odpowiedzi-

{render_order.map(a => {
            return <div class='option'> {a}</div>
})}
0
JDTech 25 czerwiec 2021, 06:45

Myślę, że Twój {correct} niepotrzebnie się powtarza.

<div class='question'>
        <div class='real_question'>
            {questions[props.level][props.option][0]}
        </div>
        {render_order.map(a => {
            return <div class='option'> {a}</div>
        })}
        {correct}
 </div> 

Czy to właśnie próbujesz zrobić?

0
Mahesh 25 czerwiec 2021, 06:52

Spróbuj dodać kluczową właściwość do każdego elementu na liście

0
akash ingole 25 czerwiec 2021, 08:30