Reactjs React JSX 中的 forEach() 不输出任何 HTML

发布于12月03日

我想通过React输出一个对象:

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

我的react 成分(减少)是另一种成分

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中看到的，我试图通过使用props中的数组答案来插入一个组件答案数组，它不会被写入，但不会输出到HTML中.

推荐答案

需要将一个元素数组传递给jsx.问题是101 does not return anything (i.e it returns 102).所以最好使用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;