Question

我是React的新手。如果有人可以提供帮助，我们将非常高兴：我有包含所有数据的父级（仪表板）。此数据将传递到子组件（OnBoardingCard）。如何在不使用[num]的情况下基于仪表板上对象中的数据渲染n次OnBoardingCard组件（在这种情况下为3次-3x OnBoarding Card;）？

谢谢！

父母-仪表板

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>

    );
} }

儿童-登机牌

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>
); }}

Answer 1

您可以使用地图功能

像这样

{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>)}

Answer 2

在渲染内部使用地图时，为其子组件分配一个唯一键。

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>
   )}
 );
}

Answer 3

<Section>
 <div className={styles.cardRow}>
   {cardData.map((card, i) => (
     <OnboardingCard {...card} key={i} />
   ))}
 </div>        
</Section>

这就是我的意思（并且想做）。所以这解决了我的问题。谢谢大家！

根据对象中的数据渲染N倍分量

3 个答案: