昨天成功寫出了第一個Component，但這個Component還沒有任何功能，只能呈現固定的畫面。如果要讓component能夠根據變數內容做出變化的話，就需要使用到props、event handler以及hooks。今天我先來介紹一下props及event handler，明天再來介紹hooks。

昨天忘記提了，由於function只能return一個值，因此如果有多行程式碼時務必要用一個容器包起來，不能有好幾個區塊，不然會報錯喔!

props

props是properties的簡稱，可以自外層的component傳入props進內層component，讓component顯示出需要的值。

const Title = (props) => {
    return (
        // 顯示出props.content
        <h1>{props.content}</h1>
    )
}

const App = () => {
    // 定義要傳入的字串
    let text = "This is title";
    return (
        <div>
            // 在Title這個component中傳入content參數
            <Title content={text}/>
        </div>
    )
}

傳入component的所有屬性，會被打包成一個物件，通常會命名為props，要取得傳入的值，就需要從props這個物件中取出這個屬性，並傳入內部元素。
若覺得要多寫一個props很麻煩，也可以使用ES6的解構賦值:

const Title = ({content}) => {
    return (
        <h1>{content}</h1>
    )
}

event handler

接著要來看讓網頁動起來的event handler，過去使用JavaScript操作DOM時，多半都是使用addEventListener監聽事件，並執行callback function；但在React中，會傾向在HTML元素中監聽事件，也就是利用onClick、onChange等屬性來處理事件。
在使用event handler時，通常會先將處理事件用的function在return之前定義好，再放入JSX程式碼中:

const App = function () {
// event handler
  function helloFriend(msg) {
    alert(msg);
  }
  return (
    <div>
      <form action="/">
			{/*event handling*/}
        <button onClick={(e) => {
          e.preventDefault();
          helloFriend('Hello friend!')
        }}>Hello!</button>
      </form>
    </div>
  )
}

要注意: onClick後面的arrow function就相當於是addEventListener的callback function，其參數應為event object，因此即使有先定義function，也需要再將其放入一個參數為event的function(或是直接定義以event為參數的function)。

熟悉props和event handler之後，就能對我們的React程式做更多事了！但只有這樣的話不足以讓React成為一個知名又好用的框架，明天會來介紹React的重點之一: hooks！