开发者社区> 问答> 正文

#React 您如何有条件地渲染组件?

#React 您如何有条件地渲染组件?

展开
收起
因为相信,所以看见。 2020-05-07 17:48:50 1034 0
1 条回答
写回答
取消 提交回答
  • 阿里,我所有的向往

    在某些情况下,您希望根据某些状态渲染不同的组件。JSX不呈现false或undefined,因此只有在满足特定条件的情况下,才可以使用条件短路来呈现组件的给定部分。

    const MyComponent = ({ name, address }) => (
      <div>
        <h2>{name}</h2>
        {address &&
          <p>{address}</p>
        }
      </div>
    )
    

    如果需要if-else条件,请使用三元运算符。

    const MyComponent = ({ name, address }) => (
      <div>
        <h2>{name}</h2>
        {address
          ? <p>{address}</p>
          : <p>{'Address is not available'}</p>
        }
      </div>
    
    

    )

    2020-05-07 17:50:59
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
利用编译将 Vue 组件转成 React 组件 立即下载
React Native 全量化实践 立即下载
React在大型后台管理项目中的工程实践 立即下载