React 在 JSX 中嵌入JavaScript表達式-大括號{}

import React from 'react';


//一、用function來實現:
//1.宣告一個變數，並在 JSX 中透過將其名稱包在大括號中使用：
function Test01(props) {
    const name = 'Jacky';
    return <h1>Hello, {name}</h1>;
  }	    
//2.嵌入一個函數，並在 JSX 中透過將其函數包在大括號中使用：
function Test02(props) {
  function getName() {
      return 'Able';
  }
  return <h1> Hello, {getName()}!</h1>;
}	    


//3.在屬性中嵌入JavaScript表達式：
  function Test03(props) {
    const url = 'http://www.yahoo.com.tw';
    return <a href={url}>點擊我</a>;
  }	   

//4.多個變數，就用多個大括號
  function Test04(props) {
    const h1='Hello';
    const h2='World';
    return <div>{h1} {h2}</div>;
  }	   

//二、用箭頭符號來實現:
//1.宣告一個變數，並在 JSX 中透過將其名稱包在大括號中使用：
  const TestA=(props)=>{
    const name = 'Jacky';
    return <h1>Hello, {name}</h1>;
  }

//2.嵌入一個函數，並在 JSX 中透過將其函數包在大括號中使用：
  const TestB=(props)=>{
    function getName() {
        return 'Able';
    }
    return <h1> Hello, {getName()}!</h1>;
  }

//3.在屬性中嵌入JavaScript表達式：
  const TestC=(props)=>{
    const url = 'http://www.yahoo.com.tw';
    return <a href={url}>點擊我</a>;
  }

//4.多個變數，就用多個大括號
  const TestD=(props)=>{
    const h1='Hello';
    const h2='World';
    return <div>{h1} {h2}</div>;
  }

  export {Test01,Test02,Test03,Test04,TestA,TestB,TestC,TestD};