#reactjs #react-native
#reactjs #react-native
Вопрос:
Я новичок в React. Буду рад, если кто-нибудь сможет помочь: у меня есть родительская панель (Dashboard), которая содержит все данные. Эти данные передаются дочернему компоненту (OnBoardingCard). Как я могу рендерить n раз компонент OnBoardingCard на основе данных в объекте на панели мониторинга без использования [num] (в данном случае 3 раза — 3x OnBoarding Cards;)?
Спасибо!!
Родительская панель мониторинга
const cardData = [
{
svg: icon1,
title: 'Add',
content: 'add more'},
{
svg: icon2,
title: 'remove',
content: 'remove'
},
{
svg: icon3,
title: 'move',
content: 'move down'
}];
class Dashboard extends Component {
render() {
return (
<Section>
<OnboardingCard listData={cardData}/>
</Section>
);
} }
Дочерние элементы- OnBoardingCard
import Dashboard from "../../../../screens/Dashboard/index.js";
class OnboardingCard extends Component {
render() {
return (
<div className={styles.cardHolder}>
<div className={styles.fullCard}>
<div className={styles.onboardingCard}>
<div className={styles.iconBackground}>
<img src={this.props.listData[0].svg} />
</div>
<div className={styles.title}>{this.props.listData[0].title}</div>
</div>
<p className={styles.cardDescription}>
{this.props.listData[0].content}
</p>
</div>
</div>
); }}
Ответ №1:
Когда вы используете карту внутри рендеринга, назначьте уникальный ключ ее дочернему компоненту.
render(){
return(
{this.props.listData.map((item, i) =>
<div className={styles.cardHolder} key={i}>
<div className={styles.fullCard}>
<div className={styles.onboardingCard}>
<div className={styles.iconBackground}>
<img src={this.props.listData[0].svg} />
</div>
<div className={styles.title}>{this.props.listData[0].title}</div>
</div>
<p className={styles.cardDescription}>
{this.props.listData[0].content}
</p>
</div>
</div>
)}
);
}
Ответ №2:
Вы можете использовать функцию map,
вот так,
{this.props.listData.map((item)=>
<div className={styles.cardHolder}>
<div className={styles.fullCard}>
<div className={styles.onboardingCard}>
<div className={styles.iconBackground}>
<img src={item.svg} />
</div>
<div className={styles.title}>{item.title}</div>
</div>
<p className={styles.cardDescription}>
{item.content}
</p>
</div>
</div>)}
Комментарии:
1. Спасибо, но реквизит cardData находится на панели мониторинга (родительской), а не дочерней. :/
2. это было просто для справки, используйте там props. т.Е.
this.props.listData
Ответ №3:
<Section>
<div className={styles.cardRow}>
{cardData.map((card, i) => (
<OnboardingCard {...card} key={i} />
))}
</div>
</Section>
Это то, что я имел в виду (и хотел сделать). Итак, это решает мой вопрос. Спасибо всем!!