如何在 React 语义 UI 中动态渲染卡片

Question

我已经将我的 redux 存储映射到 props，但现在我在动态渲染它时遇到了问题。我也尝试过projectCards(){...}语法，但这完全是在黑暗中拍摄的。我的控制台日志显示对象以我想要的方式通过。我也尝试使用projects.map，但我认为我不想将返回值放在新数组中。我只想在页面上动态呈现更多<Card/>项目。我哪里做错了？任何帮助将不胜感激。

Class Projects extends...
.
.
.
projectCards = () => {
if ( this.props.projects.length !== 0 ) {
this.props.projects.forEach((project) => {
return <Card fluid color='green' header={project.name} />
})
}
}
render(){
return(
<Container>
<br/>
<Card.Group>
<Card fluid color='green' header='Option 1' />
<Card fluid color='blue' header='Option 2' />
<Card fluid color='red' header='Option 3' />
{ this.projectCards() }
</Card.Group>
</Container>
)
}
}

Answer 1

试试这个：

projectCards = () => {
if ( this.props.projects.length !== 0 ) {
return this.props.projects.map( project => 
<Card fluid color='green' header={project.name} />
)
}
}