Day08 React Props-组件属性

component组件之间相互发送数据，传递数据的方式是使用 props。Props代表属性，用於将数据从一个组件传递到另一个组件。

今天透过实作，新增一个Card组件，在card组件中先把架构写好

import React from 'react';


const Card = (props) => {
    return (
        <div>
         
          <div className="box">
           <h3>{props.title}</h3>
           <p>{props.of}</p>
           <img
            src={props.imgsrc}  />
           <a href="" class="btn">Buy now</a>
         </div>
            
        </div>
    )
}



export default Card

然後在App.js中汇入，并将app.js中的属性数据传入card.js中，
这样card的内容将由app.js传入的属性数据所决定。

import React from 'react';
import Header1 from "./components/Header1";
import Header2 from "./components/Header2";
import Section1 from "./components/Section1";
import Card from "./components/Card";
import meal from "./assets/images/meal.png"; 
import meal01 from "./assets/images/meal01.png" 


const App = (props) => {
  return (
    <div>
      <Header1 />
      <Header2 />
      <Section1 />
      <Card
             
             title="Steak Meal" 
             of="upto 90% off"
             imgsrc ={meal}             
       />

     <Card             
             title="Hamburger" 
             of="upto 80% off"
             imgsrc ={meal01}             
       />  
       <Card
             
             title=" Pizza" 
             of="upto 70% off"
             imgsrc ={meal}             
       />        
      
    </div>
  )
}

export default App