【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 不會顯示 */}
    { [1,2,3] /** 純值陣列會直接顯示 ex 1 2 3 */}
  </div>
}

綁定陣列

function App() {
  const data = {
    imageUrl: 'https://images.unsplash.com/photo-1564564321837-a57b7070ac4f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2352&q=80',
    name: '卡斯伯',
    description: 'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Modi culpa aspernatur tempore cupiditate illo minima voluptatem blanditiis optio accusantium earum voluptate magni repellendus, ipsa dolor adipisci libero qui commodi veritatis.',
    link: 'https://www.casper.tw/'
  }

  // #3 直接插入 HTML 結構的變數
  // https://getbootstrap.com/docs/5.2/components/card/#list-groups
  let list = [
    <li className="list-group-item">An item</li>,
    <li className="list-group-item">A second item</li>,
    <li className="list-group-item">A third item</li>,
  ];
  return <div className="card w-50">
    <img src={data.imageUrl} className="card-img-top" alt="..." />
    <div className="card-body">
      <h5 className="card-title">{ data.name }</h5>
      <p className="card-text">{ data.description }</p>
      <a href={data.link} target="_blank" className="btn btn-primary">Go somewhere</a>
    </div>
    {/* 2. 陣列中的值會直接呈現在畫面上 */}
    <ul className="list-group list-group-flush">
      {list}
    </ul>
  </div>
}

綁定Style

兩個大括號包住 style = {{}}

<!-- 原html-->
<div class="card" style="width: 18rem">
  <div
    class="card-img-top"
    style="
      height: 200px;
      background-image: url('https://images.unsplash.com/photo-1564564321837-a57b7070ac4f?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=2352&amp;q=80');
      background-size: cover;
      background-position: center center;
    "
  ></div>
  <div class="card-body">
    <h5 class="card-title">卡斯伯</h5>
    <p class="card-text">
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Modi culpa
      aspernatur tempore cupiditate illo minima voluptatem blanditiis optio
      accusantium earum voluptate magni repellendus, ipsa dolor adipisci libero
      qui commodi veritatis.
    </p>
    <a href="https://www.casper.tw/" target="_blank" class="btn btn-primary"
      >Go somewhere</a
    >
  </div>
</div>

/**
有 - 要改為駝峰式命名
background-image => backgroundImage 
*/
return (
      <div className='card' style={{width: "18rem"}}>
        <div className='card-img-top' style={{
          height: '200px',
          backgroundImage: `url('https://images.unsplash.com/photo-1564564321837-a57b7070ac4f?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=2352&amp;q=80')`,
          backgroundSize: 'cover',
          backgroundPosition: "center center"
        }}>
        </div>
        <div className='card-body'>
          <h5 className='card-title'>{data.name}</h5>
          <p className='card-text'>{data.description}</p>
          <a href={data.link} target='_blank' className='btn btn-primary'>
            Go somewhere
          </a>
        </div>
      </div>
    );