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

Question

我已经将我的 redux store 映射到 props，但我现在无法动态渲染它。我也尝试过 projectCards(){...} 语法，但那完全是在黑暗中进行的。我的控制台日志显示了通过我想要的方式出现的对象。我也尝试使用 projects.map，但我不认为我想将 return 值放入新数组中。我只想在页面上动态呈现更多 <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} />
    )
  }
}

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

How to Dynamically Render Cards in React Semantic UI

reactjs

semantic-ui

react-redux

semantic-ui-react