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;