Как динамически отображать карты в React Semantic UI
Я сопоставил свое хранилище redux с реквизитами, но теперь у меня проблемы с его динамическим рендерингом. Я также пробовал синтаксис 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>
)
}
}
Ответы 1
Попробуй это:
projectCards = () => {
if ( this.props.projects.length !== 0 ) {
return this.props.projects.map( project =>
<Card fluid color='green' header = {project.name} />
)
}
}
Это сработало! Итак, я хотел вернуть массив <Card>?
Понятно! Однако как вы думаете, можно ли сделать так, чтобы функция возвращала значение более одного раза? После возврата первого Card component готово! Остальные компоненты карты не смогут ожить. Кстати, почему ты не хочешь return an array of <Card>s
Неплохо подмечено. Сегодня я не впервые пробовал использовать несколько операторов return в одной и той же функции!
Я не могу его редактировать, но в вашем посте не хватает фигурных фигур. Спасибо за вашу помощь.
Используйте
.map()вместо.forEach(). Некоторые прошлые полезные ответы StackOverflow по этому поводу: stackoverflow.com/questions/47442462/…, stackoverflow.com/questions/42460357/…