学校登陆网站制作,网站建设基本知识,wordpress会员中心,互联网创业项目方案条件渲染——逻辑与运算符
你会遇到的另一个常见的快捷表达式是 JavaScript 逻辑与#xff08;#xff09;运算符。在 React 组件里#xff0c;通常用在当条件成立时#xff0c;你想渲染一些 JSX#xff0c;或者不做任何渲染。
function Item({ nam…条件渲染——逻辑与运算符
你会遇到的另一个常见的快捷表达式是 JavaScript 逻辑与运算符。在 React 组件里通常用在当条件成立时你想渲染一些 JSX或者不做任何渲染。
function Item({ name, isPacked }) {return (li classNameitem{name} {isPacked ✔}/li);
}export default function PackingList() {return (sectionh1Sally Ride 的行李清单/h1ulItem isPacked{true} name宇航服 /Item isPacked{true} name带金箔的头盔 /Item isPacked{false} nameTam 的照片 //ul/section);
}
运行结果
当 JavaScript 表达式 的左侧我们的条件为 true 时它则返回其右侧的值在我们的例子里是勾选符号。但条件的结果是 false则整个表达式会变成 false。在 JSX 里React 会将 false 视为一个“空值”就像 null 或者 undefined这样 React 就不会在这里进行任何渲染。
⚠️注意
切勿将数字放在 左侧. JavaScript 会自动将左侧的值转换成布尔类型以判断条件成立与否。然而如果左侧是 0整个表达式将变成左侧的值0React 此时则会渲染 0 而不是不进行渲染。
例如一个常见的错误是 messageCount pNew messages/p。其原本是想当 messageCount 为 0 的时候不进行渲染但实际上却渲染了 0。
为了更正可以将左侧的值改成布尔类型messageCount 0 pNew messages/p。
