在JSX中反应foreach

Question

我有一个我想通过REACT输出的对象

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

而我的反应成分(减少)是另一个组成部分

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;

正如你从上面的snippit中看到的那样,我正在尝试插入组件的数组通过在道具中使用数组Answers,它确实是itterate但不输出到HTML中.

Answer 1

您需要传递一个元素数组jsx.问题是forEach不返回任何东西(即它返回undefined).所以更好用,map因为它返回一个这样的数组

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;