react中根据不同的条件渲染对应的组件

定位算法工程师

已于 2023-02-14 16:47:13 修改

阅读量776

点赞数

分类专栏： react 文章标签： react.js 前端

于 2023-01-30 15:13:59 首次发布

本文链接：https://blog.csdn.net/qq_37967853/article/details/128803095

版权

react 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

判断条件，不同条件下渲染不同组件：
当ele.PlantingCrop为不同值时，此处渲染的组件也不同，具体ES6语法糖如代码所示：
{条件 && (组件)}

{ele.PlantingCrop === '种植中' && (
 <Tag color="rgba(55, 58, 58, 1)">
   <p style={{ color: 'rgba(63, 217, 163, 1)' }}>种植中</p>
 </Tag>
)}
{ele.PlantingCrop === '已收获' && (
 <Tag color="rgba(55, 58, 58, 1)">
   <p style={{ color: 'white' }}>已收获</p>
 </Tag>
)}

当props.editorInfo为“是非”值时，ES6语法糖可为：
{条件？（组件1）：（组件2）}
例如判断props的值：

{props.editorInfo ? (
 <Tag color="rgba(55, 58, 58, 1)">
   <p style={{ color: 'rgba(63, 217, 163, 1)' }}>种植中</p>
 </Tag>
):(
 <Tag color="rgba(55, 58, 58, 1)">
   <p style={{ color: 'white' }}>已收获</p>
 </Tag>
)}