React 条件渲染

开发环境：React+ts+antd

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

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

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><ItemisPacked={true}name="宇航服"/><ItemisPacked={true}name="带金箔的头盔"/><ItemisPacked={false}name="Tam 的照片"/></div>)
}
export default App;

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

return (<li className="item">{isPacked ? name + ' ✔' : name} </li>);

 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） 来渲染 ❌

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

运行结果如下:

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