react-函数组件的条件渲染和列表渲染

如何在函数组件中实现条件渲染呢？

• 列表渲染

list提前使用list, setList 和useState，hooks进行设置初始值。在return函数中编写列表渲染

            

                {list.map(item => 
                    
{item}
                )}
            

• 条件渲染 : 三目运算符进行计算

            
数据：{stateNum > 0 ? stateNum : 0}

    　　　　
{stateNum>2 && 减少redux：{stateNum} }
 //前面部分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 (
        

            

                {list.map(item => 
                    
{item}

                )}
            
            
 { setNum(num + 1) }}>我在持续增加哦：{num}
            
增加redux：{stateNum}
            
减少redux：{stateNum}
            
现有的数据：{stateNum > 0 ? stateNum : 0}
        

    )
}
export default Home;