Reagieren Sie in JSX

96

Ich habe ein Objekt, das ich über REACT ausgeben möchte

question = {
    text: "Is this a good question?",
    answers: [
       "Yes",
       "No",
       "I don't know"
    ]
} 

und meine Reaktionskomponente (abgeschnitten) ist eine andere Komponente

class QuestionSet extends Component {
render(){ 
    <div className="container">
       <h1>{this.props.question.text}</h1>
       {this.props.question.answers.forEach(answer => {     
           console.log("Entered");  //This does ifre                       
           <Answer answer={answer} />   //THIS DOES NOT WORK 
        })}
}

export default QuestionSet;

Wie Sie aus dem obigen Snippit sehen können, versuche ich, ein Array der Komponente Answer mithilfe des Arrays Answers in Requisiten einzufügen. Es iteriert, wird aber nicht in HTML ausgegeben.

Michael
quelle

Antworten:

194

Sie müssen ein Array von Elementen an übergeben jsx. Das Problem ist, dass forEachnichts zurückgegeben wird (dh es wird zurückgegeben undefined). Also besser verwenden, mapweil es ein Array wie dieses zurückgibt

class QuestionSet extends Component {
render(){ 
    <div className="container">
       <h1>{this.props.question.text}</h1>
       {this.props.question.answers.map((answer, i) => {     
           console.log("Entered");                 
           // Return the element. Also pass key     
           return (<Answer key={i} answer={answer} />) 
        })}
}

export default QuestionSet;
Prakash Sharma
quelle
3
Die Verwendung von var i als Schlüssel ist in manchen Situationen für virtuelle Domänen keine gute Wahl.
Maquannene
1
@maquannene In der Tat danke, dass Sie darauf hingewiesen haben. Hier ist ein guter Beitrag darüber, warum medium.com/@robinpokorny/…
cyberwombat
FWIW können Sie auch andere Arten von Sammlungen übergeben. Sie müssen sie nur abrollen, damit sie funktionieren .map(). zB Object.keys(collection).map(key => ...und weisen Sie eine Variable für die bequeme Arbeit mitcollection[key]
John Kaster