加入收藏 | 设为首页 | 会员中心 | 我要投稿 常州站长网 (https://www.0519zz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 编程要点 > 资讯 > 正文

编写简洁的React代码方案

发布时间:2021-05-24 11:29:26 所属栏目:资讯 来源:互联网
导读:副标题#e# 如果你不同意其中任何一条,那也完全没问题。 只对一个条件进行条件性渲染 如果你需要在一个条件为真时有条件地呈现一些东西,在一个条件为假时不呈现任何东西,不要使用三元运算符。使用运算符代替。 糟糕的例子: importReact,{useState}fromrea

  <span>{isHungry ? 'I am hungry' : 'I am full'}</span> 

 

export const BooleanPropBad = () => ( 

  <div> 

    <span> 

      <b>This person is hungry: </b> 

    </span> 

    <HungryMessage isHungry={true} /> 

    <br /> 

    <span> 

      <b>This person is full: </b> 

    </span> 

    <HungryMessage isHungry={false} /> 

  </div> 

 好的例子:

import React from 'react' 

 

const HungryMessage = ({ isHungry }) => ( 

  <span>{isHungry ? 'I am hungry' : 'I am full'}</span> 

 

export const BooleanPropGood = () => ( 

  <div> 

    <span> 

      <b>This person is hungry: </b> 

    </span> 

    <HungryMessage isHungry /> 

    <br /> 

    <span> 

      <b>This person is full: </b> 

    </span> 

    <HungryMessage isHungry={false} /> 

  </div> 

(编辑:常州站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

热点阅读