React 条件渲染

开发环境:React+ts+antd

通常你的组件会需要根据不同的情况显示不同的内容。在 React 中,你可以通过使用 JavaScript 的 if 语句、&& 和 ? : 运算符来选择性地渲染 JSX。

例子

我们在满足 isPacked={true} 条件的物品清单旁加上一个勾选符号✔。

javascript 复制代码
import React from "react";

interface ListPro {
    name:string,
    isPacked:boolean,
}

const Item:React.FC<ListPro> =({name,isPacked})=>{
	if (isPacked) {
        return <li className="item">{name} ✔</li>;
    }
    return <li className="item">{name}</li>;
}

const App: React.FC = () => {
    return (
        <div>
            <h1>Sally Ride 的行李清单</h1>
            <Item
                isPacked={true}
                name="宇航服"
            />
            <Item
                isPacked={true}
                name="带金箔的头盔"
            />
            <Item
                isPacked={false}
                name="Tam 的照片"
            />
        </div>
    )
}
export default App;

此条件判断处可以使用三目运算,或者是与运算符(&&), 运行结果是一样的

javascript 复制代码
return (
        <li className="item">
            {isPacked ? name + ' ✔' : name} 
        </li>
    );
javascript 复制代码
 return (
        <li className="item">
            {name} {isPacked && '✔'}
        </li>
    );

注意:切勿将数字放在 && 左侧.

JavaScript 会自动将左侧的值转换成布尔类型以判断条件成立与否。然而,如果左侧是 0,整个表达式将变成左侧的值(0),React 此时则会渲染 0 而不是不进行渲染。

例如,一个常见的错误是 messageCount &&

New messages
。其原本是想当 messageCount 为 0 的时候不进行渲染,但实际上却渲染了 0。

为了更正,可以将左侧的值改成布尔类型:messageCount > 0 &&

New messages

接下来我们给未完成的物品加上图标,当 isPacked 不为 true 时,使用条件运算符 (cond ? a : b) 来渲染 ❌

javascript 复制代码
return (
        <li className="item">
            {isPacked ? name + '✔' : name + '❌'}
        </li>
    );

运行结果如下:

例子是参考React官方文档教程,不同的是我这里使用TS来写

相关推荐
萌萌哒草头将军33 分钟前
🚀🚀🚀 尤雨溪宣布 Vite 发布 Rolldown-Vite 预览版,性能超级快!⚡️⚡️⚡️
前端·vue.js·vite
言不由衷煦1 小时前
Centos7.x内网环境Jenkins前端打包环境配置
运维·前端·jenkins
Adolf_19931 小时前
JavaScript中的命名导出(暴露)
前端·javascript·react.js
招风的黑耳1 小时前
Spring Web高保真Axure动态交互元件库
前端·spring·axure
橙色小博2 小时前
Python中openpyxl库的基础解析与代码实例
前端·python·excel·openpyxl
xcLeigh2 小时前
HTML5实现简洁的端午节节日网站源码
前端·html5·节日·端午节
大数据魔法师4 小时前
Bootstrap项目 - 个人作品与成就展示网站
前端·bootstrap·html
LaughingZhu7 小时前
PH热榜 | 2025-05-29
前端·人工智能·经验分享·搜索引擎·产品运营
汪子熙10 小时前
Angular i18n 资源加载利器解析: i18n-http-backend
前端·javascript·面试
天天扭码10 小时前
在React项目中实现富文本编辑文章并发布
前端·react.js·github