【React】資料綁定

單向綁定

使用大括弧綁定變數，標籤內屬性不用加雙引號

const data = {
  imgUrl : "https://images.unsplash.com/photo-1650190558669-e8cc1ae3551f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80",
  titl: "AAAA",
  content : "Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, esse sequi? Dolores, perspiciatis! Minima aliquid tempore placeat ut qui atque asperiores totam iusto, dolorem est blanditiis nesciunt minus. Officiis, voluptate!",
  link: "https://www.google.com.tw"
}

function App(){
  
  return <div className="card">
  <img src={data.imgUrl} className="card-img-top" alt="..." />
    <div className="card-body">
      <h5 className="card-title">{data.titl}</h5>
      <p className="card-text">{data.content}</p>
      <a href={data.link} className="btn btn-primary">Go somewhere</a>
    </div>
  	{ /** 可用註解 */}
    { (function(){return "可function"})() }
  	{ tt ? tt : "可用三元運算" }
    { /** 不可用物件但可用 JSON.stringify 轉為字串除錯 */}
    { JSON.stringify(data)}
    { /** true, false, undefined, null, arraynull 不會顯示 */}
    { [1,2,3] /** 純值陣列會直接顯示 ex 1 2 3 */}
  </div>
}