React+TS项目TSX文件中判断可为null的props属性并实现条件渲染

实现方案 #

你可以直接使用空值合并运算符（??） 实现需求，该运算符仅在左侧值为null/undefined时返回右侧内容，不会误判0、空字符串等合法值，完全匹配你的使用场景。

基础写法（直接替换为文本占位） #

<p 
  className={classes['innerContainer__text']}>
  {props.prices?.BTCUSD ?? '自定义占位文本'}
</p>

区分不同空状态的写法 #

如果需要对prices本身为空、prices.BTCUSD为空两种场景展示不同占位，可使用三元运算符：

<p 
  className={classes['innerContainer__text']}>
  {props.prices 
    ? (props.prices.BTCUSD ?? 'BTCUSD暂无报价') 
    : '行情数据加载中'}
</p>

占位为JSX结构的写法 #

如果占位内容是带样式的组件或者复杂结构，也可以直接传入：

<p 
  className={classes['innerContainer__text']}>
  {props.prices?.BTCUSD ?? <span className="empty-placeholder">暂无数据</span>}
</p>

注意：不要使用逻辑或运算符||实现该需求，如果你业务中允许BTCUSD的值为0，||会将0判定为假值返回占位内容，不符合预期。

内容的提问来源于stack exchange，提问作者user16657995