react-函數組件的條件渲染和列表渲染

如何在函數組件中實現條件渲染呢？

• 列表渲染

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

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

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

            <div>數據：{stateNum > 0 ? stateNum : 0}</div>

    　　　　<div >{stateNum>2 && <span>減少redux：{stateNum}</span> }</div> //前面部分true才會渲染后邊的內容  功能同 vue中的v-if

 

• 也可以寫成函數，在函數內進行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;