如何在函式元件中實現條件渲染呢？

• 列表渲染

list提前使用list, setList 和useState，hooks進行設定初始值。在return函式中編寫列表渲染

            <ul>
                {list.map(item => 
                    <li key={item}>{item}</li>
                )}
            </ul>

• 條件渲染 : 三目運算子進行計算

            <div>資料：{stateNum > 0 ? stateNum : 0}</div>

• 也可以寫成函式，在函式內進行return 在render中執行。

示例：

import React, { useState } from "react";
function Home() {
    const [num, setNum] = useState(0);
    const [stateNum, setStateNum] = useState(0);
    const [list, useList] = useState([1, 2, 3, 4, 5]);
    function add() {
        setStateNum(stateNum+2)
    }
    function reduce() {
    setStateNum(stateNum
 
-2)

    }
    if (stateNum > 5) {
        return null;//函式元件不返回資料 下邊不渲染
    }
    return (
        <div>
            <ul>
                {list.map(item => 
                    <li key={item}>{item}</li>
                )}
            </ul>
            <div onClick={() => { setNum(num + 1
 
) }}>我在持續增加哦：{num}</div>
            <div onClick={add}>增加redux：{stateNum}</div>
            <div onClick={reduce}>減少redux：{stateNum}</div>
            <div>現有的資料：{stateNum > 0 ? stateNum : 0}</div>
        </div>
    )
}
export default Home;