我有一个要通过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;
从上面的代码片段中可以看到,我正在尝试通过在props中使用数组Answers来插入组件Answer的数组,它确实令人生厌,但没有输出为HTML。
您需要将元素数组传递给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;
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句