如何在反应中使用if语句?

清洁

我有一个.jsx文件,其中包含:

<p_grid>
  <RangeSpan>
    Currently, there are {" "}
    <b>{Math.round(house.records * 100) / 100} houses</b> found.
  </RangeSpan>
</p_grid>

这项工作正常,但现在我要审讯house.source并显示不同的内容,例如:

if ({house.source}=="X")
{
Currently, there are {" "} <b>{Math.round(house.records * 100) / 100} houses</b> found.
}
else
{
different calculation and text.
}

我可以显示house.sourceOK,但无法弄清楚if语句的执行方式。对此完全陌生,因此不胜感激(我尝试使用三元运算符,但不知道如何与它结合使用{}""甚至不知道在这种情况下都可以使用)。

亚历山大·尼德

您不能在JSX中直接使用if/else语句,但是可以执行以下操作:

<p_grid>
  <RangeSpan>
    {
        house.source === "X"
        && (<>Currently, there are {" "} <b>{Math.round(house.records * 100) / 100} houses</b> found.</>)
    }
    {
        house.source !== "X"
        && (<>different calculation and text.</>)
    }
  </RangeSpan>
</p_grid>

如TKol的回答所示,这也可以表示为三元

如果涉及的更多,则可以将计算移至实际JSX return语句之外的render方法(或功能组件)中,甚至将功能封装到其自己的组件中(Prebiusta的答案就是一个很好的例子。方法)。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

来自分类Dev

如何在反应中使用gapi

来自分类Dev

如何在HOC中使用refs反应?

来自分类Dev

如何在反应中使用getAttribute?

来自分类Dev

如何在反应组件中使用解构

来自分类Dev

如何在ngFor中使用反应形式

来自分类Java

如何在流中使用If语句?

来自分类Dev

如何在if语句中使用grep?

来自分类Linux

如何在Python中使用IF ALL语句

来自分类Java

如何在Android中使用goto语句

来自分类Dev

如何在if语句中使用expr?

来自分类Dev

如何在绑定中使用switch语句?

来自分类Dev

如何在方法中使用`using`语句

来自分类Dev

如何在ejs中使用if语句?

来自分类Dev

如何在动态组件中使用反应形式

来自分类Dev

反应导航-如何在标题NavigationOptions中使用this.state?

来自分类Dev

如何在反应内联样式中使用网格模板区域?

来自分类Dev

如何在Angular 5反应形式输入中使用管道

来自分类Dev

如何在反应/打字稿中使用枚举作为道具

来自分类Dev

如何在与打字稿本机反应中使用通用组件

来自分类Dev

如何在ng-template中使用反应形式

来自分类Dev

本地反应-如何在构造函数中使用状态

来自分类Dev

如何在打字稿中使用Highcharts并做出反应

来自分类Dev

如何在if语句的列中使用前N个值

来自分类Javascript

如何在underscore.js模板中使用if语句?

来自分类Dev

如何在MySQL的INSERT语句中使用SELECT MAX?

来自分类Dev

您如何在Java中使用label语句?

来自分类Dev

如何在switch语句中使用通配符?

来自分类Dev

如何在UPDATE语句中使用regexp_matches()?

来自分类Dev

如何在MySQL中使用预处理语句截断表?

TOP 榜单

  1. 1

    来自Microsoft Office加载项taskpane.js的MySQL驱动程序模块的空引用

  2. 2

    HikariPool-1-连接不可用,对于极小的负载服务器,请求在30000ms之后超时

  3. 3

    OpenJDK的和AdoptOpenJDK的区别

  4. 4

    任务':app:minifyReleaseWithR8'.java.lang.NullPointerException的执行失败(无错误消息)

  5. 5

    java.lang.NoClassDefFoundError:无法初始化类org.bytedeco.javacpp.avutil

  6. 6

    是什么在Android的consumer-rules.pro和proguard-rules.pro之间的区别?

  7. 7

    如何优化在Java中这种方法吗?我得到的时间超限

  8. 8

    错误TS1086:一个存取器不能在角9的环境上下文被声明

  9. 9

    java.lang.NoSuchFieldError的:ACCEPT_CASE_INSENSITIVE_VALUES

  10. 10

    如何在exoplayer中播放本地媒体文件的硬编码内容uri

  11. 11

    Keras提前停止回调错误,val_loss指标不可用

  12. 12

    在JavaScript中删除多个对象键值

  13. 13

    请问Spring事务管理工作与Spring WebFlux?

  14. 14

    未定义:grpc.SupportPackageIsVersion7 grpc.ServiceRegistrar

  15. 15

    如何在Python中将字典拆分成多个字典的列表,所有字典的大小均为N

  16. 16

    在IntelliJ IDEA中并行运行测试用例

  17. 17

    Java的无法解析日期的SimpleDateFormat

  18. 18

    tensorflow:仅在可用val_acc的情况下可以保存最佳模型,跳过

  19. 19

    无法装载动态库“libnvinfer.so.6”

  20. 20

    Java反射错误Java.lang.NoSuchMethodException,但是方法存在

  21. 21

    我在android studio中创建了clicker应用。但是,运行时,应用程序在调用“ incrementCount()”后崩溃。为什么?

热门标签

归档