React中使用props

1.模拟数据
2.传递数据
3.接收并使用数据
4.结果展示
5.进阶可实现

实现根据数据渲染卡片（卡片数量根据数据动态、卡片框架样式相同，内容不同）

1.模拟数据

export default [
    {
        id: 1,
        title: "Life Lessons with Katie Zaferes",
        description: "I will share with you what I call \"Positively Impactful Moments of Disappointment.\" Throughout my career, many of my highest moments only came after setbacks and losses. But learning from those difficult moments is what gave me the ability to rise above them and reach my goals.",
        price: 136,
        coverImg: "katie-zaferes.png",
        stats: {
            rating: 5.0,
            reviewCount: 6
        },
        location: "Online",
        openSpots: 0,
    },
    {
        id: 2,
        title: "Learn Wedding Photography",
        description: "Interested in becoming a wedding photographer? For beginner and experienced photographers alike, join us in learning techniques required to leave the happy couple with memories that'll last a lifetime.",
        price: 125,
        coverImg: "wedding-photography.png",
        stats: {
            rating: 5.0,
            reviewCount: 30
        },
        location: "Online",
        openSpots: 27,
    },
    {
        id: 3,
        title: "Group Mountain Biking",
        description: "Experience the beautiful Norwegian landscape and meet new friends all while conquering rugged terrain on your mountain bike. (Bike provided!)",
        price: 50,
        coverImg: "mountain-bike.png",
        stats: {
            rating: 4.8,
            reviewCount: 2
        },
        location: "Norway",
        openSpots: 3,
    }
]

2.传递数据

import MainContent from './components/MainContent'
import Data from './Data'
// console.log(Data)
export default function Card(){
  const card = Data.map((item)=>{
  return <MainContent 
        key={item.id}
        item={item}></MainContent>
    //es6写法：后面直接props.
    //<MainContent
       // key={item.id}
       // {...item}
      //></MainContent>
  })
  return(
    <div>
    {card}
    </div>
  )
}

3.接收并使用数据

import React from 'react'
export default function MainContent(props){
    //console.log(props)
    return(
        <div>
            //{props.item.openSpots ===0 && <div>SOLD OUT</div>} //如果props.openSpots ===0展示SOLD OUT否则不展示
            <img src={require(`../images/${props.item.coverImg}`)}  className='img'></img>
            <div className='star'>
                <svg t="1729071371462" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/6z" fill="#FE9517" p-id="8017"></path></svg>
            <p>{props.item.stats.rating}</p>
            <p>{props.item.stats.reviewCount}</p>
            </div>
            <p>{props.item.title}
            </p>
            <p><b>From ${props.item.price}</b> / person
            </p>
        </div>
    )
}