Блог

Главная - Вопросы по программированию - Рендеринг компонента N раз на основе данных в объекте

Рендеринг компонента N раз на основе данных в объекте

#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>

Это то, что я имел в виду (и хотел сделать). Итак, это решает мой вопрос. Спасибо всем!!