上一篇我們講完了 Component 的結構
今天來講講 return 部分

<></>

這是我們在開發中，很常遇到這個的報錯
「JSX expressions must have one parent element 」
就是 JSX 需要包含一個父元素
在專案裡面也是很常使用到
舉個例子

const Headings: React.VFC = () => {
    return (
        <h1>H1</h1>
        <h2>H2</h2>
        <h3>H3</h3>
        <h4>H4</h4>
        <h5>H5</h5>
        <h6>H6</h6>
    )
}
export default Headings

這樣就會報錯

這時只要加上「<></>」，就不會報錯了
像這樣子

const Headings: React.VFC = () => {
    return (
          <>
              <h1>H1</h1>
              <h2>H2</h2>
              <h3>H3</h3>
              <h4>H4</h4>
              <h5>H5</h5>
              <h6>H6</h6>
          </>
      )
}
export default Headings

也可以使用「<React.Fragment></React.Fragment>」替代
當然 <></> 撰寫起來比較方便，具體使用看團隊的規範

Conditional Rendering

這也是在專案中，也很常使用的技巧
舉個例子

const GreaterThanFive: React.VFC<{num: number}> = ({num}) => {
    return <h1>>{num > 5 ? '比5大' : '比5小'}</h1>
}
export default GreaterThanFive

可以使用「三元運算子」來控制元件的顯示
也可以使用 「&&」來控制

const HasNumber: React.VFC<{num: number}> = ({num}) => {
    return num && <h1>{num}</h1>
}
export default HasNumber

Object are not valid as a React Child

簡單來說，我們在 return 的時候不能傳入 Object 或者是 Array
這樣會報錯
如果是 Array 可以這麼做

const PrintArray: React.VFC = () => {
    const arr = [1, 2, 3]
    return arr.map(num => num)
}
export default PrintArray

如果是 Object 可以這麼做

const PrintObject: React.VFC = () => {
    const Person = {name: 'Sam'; age: 24}
    return <h1>{`姓名:${Person.name}，年齡：${Person.age}`}</h1>
}
export default PrintObject

明天我們來看 locales 的部分