React JSX中的forEach（）不输出任何HTML

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;

正如你可以从上面的片段中看到的，我试图插入一个数组的组件答案通过使用数组答案在道具，它不itterate但不输出到超文本标记语言。

Answer 1

您需要将一个元素数组传递给jsx。问题是forEach不返回任何内容（即返回未定义的）。因此最好使用map，因为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={answer} answer={answer} />) 
        })}
}

export default QuestionSet;