我需要实现的是当登录页面传过来的sex值为1则性别一栏的图片修改为boy.png如果为0性别图片则显示为girl.png‘

最开始是这么写的为了让他成为变量

所以不行ok我们回到React的生命周期函数componentWillMount()

在第一次渲染之前使用

constructor(...args){

super(...args);

  this.state={

    name:this.props.location.query.name,

    sex:this.props.location.query.sex,

    path:"",

  };

}

componentWillMount(){

  let path = require('../images/girl.png');

  if(this.state.sex===1)

  path = require('../images/boy1.png');

  this.setState({

    path:path

  });

}

这样就可以实现功能

那其实也可以设置全局变量当然这样非常浪费资源

所以也可以在render里去定义

然后

至于如何让他是个变量嘛也就很简单啦

也可以尝试用条件表达式实现

{this.state.sex==1?image = require('../images/boy'):image = require('../images/girl')}

总结React关于require的问题的更多相关文章

  1. 关于React的require添加动态变化的路径

    关于React的require添加动态变化的路径 直接这样写显然是不会有错误的 let path = require('../images/girl.png'); 但是如果你尝试着 var gg = ...

  2. ReactJS实践(一)—— FrozenUI React化之Loading组件

    在前面我们通过四篇文章入门了React的大部分主要API,现在则开始进入实践环节. 实践系列的开篇打算拿我司的FrozenUI来试验,将其部分UI组件进行React化,作为第一篇实践文章,将以较简单的 ...

  3. React同构直出原理浅析

    通常,当客户端请求一个包含React组件页面的时候,服务端首先响应输出这个页面,客户端和服务端有了第一次交互.然后,如果加载组件的过程需要向服务端发出Ajax请求等,客户端和服务端又进行了一次交互,这 ...

  4. React直出实现与原理

    前一篇文章我们介绍了虚拟DOM的实现与原理,这篇文章我们来讲讲React的直出. 比起MVVM,React比较容易实现直出,那么React的直出是如何实现,有什么值得我们学习的呢? 为什么MVVM不能 ...

  5. React+Node初尝试

    这是第一次写React和Node,选用的是前端Material-ui框架,后端使用的是Express框架,数据库采用的是Mongodb. 项目代码在:GitHub/lilu_movie 这是一个通过从 ...

  6. 【09】react 之 表单组件

    不太清楚有多少初学React的同学和博主当时一样,在看完React的生命周期.数据流之后觉得已经上手了,甩开文档啪啪啪的开始敲了起来.结果...居然被一个input标签给教做人了. 故事是这样的:首先 ...

  7. 12步创建高性能Web APP

    现在,Web App 日益重视用户的交互体验,了解性能优化的方式则可以有效提高用户体验.阅读和实践下面的性能优化技巧,可以帮你改善应用的流畅度.渲染时间和其他方面的性能表现. 概述 对 Web App ...

  8. ReactJS实用技巧(2):从新人大坑——表单组件来看State

    不太清楚有多少初学React的同学和博主当时一样,在看完React的生命周期.数据流之后觉得已经上手了,甩开文档啪啪啪的开始敲了起来.结果...居然被一个input标签给教做人了. 故事是这样的:首先 ...

  9. Webpack 配置示例

    Webpack 作为前端构建工具,对于大型网站开发,大大提升了开发效率.要使用webpack需要先安装webpack工具: 先来看一个最简单的命令 $ webpack main.js bundle.j ...

随机推荐

  1. package-info.java到底是什么

    发现距离上一次在这里写博客已经三个多月了...说好的笔耕不辍呢=.= Anyway,今天(确切说是昨天晚上)在code review中被组里的QA II问到在一个叫做package-info.java ...

  2. 「LOJ#10015」「一本通 1.2 练习 2」扩散(并查集

    题目描述 一个点每过一个单位时间就会向 444 个方向扩散一个距离,如图所示:两个点 a .b 连通,记作 e(a,b),当且仅当 a .b的扩散区域有公共部分.连通块的定义是块内的任意两个点 u.v ...

  3. zabbix snmp、jmx配置使用

    SNMP: snmp是很古老的监控,我萌几乎可以在所有设备上看到它的身影 [root@linux-node1 ~]# yum install net-snmp net-snmp-libs net-sn ...

  4. Mice and Holes

    题意: 有 $n$ 只老鼠和 $m$ 个鼠洞,第 $i$ 只老鼠的坐标为 $x_i$,第 $j$ 个鼠洞的坐标为 $p_j$ ,容量为 $c_j$. 第 $i$ 只老鼠钻进第 $j$ 个鼠洞的距离为 ...

  5. POJ - 3253 Fence Repair 优先队列+贪心

    Fence Repair Farmer John wants to repair a small length of the fence around the pasture. He measures ...

  6. table对象

  7. E20190404-hm

    prepend vt. 预先考虑,预先计划,预谋;

  8. 你了解SVN, CVS等版本控制器吗?

    版本控制器SVN, CVS是两种版本控制器, 需要配套相关的SVN, CVS服务器, SCM是xcode里面配置版本控制的地方, 版本控制的原理就是A和B同时开发一个项目, A写完当天的代码之后把代码 ...

  9. iOS 8 录音重放出现 OSStatus error 1685348671 / 2003334207 问题的解决办法

    许多录音类 APP 都提供录音回放功能,大家在做这类 APP 的时候也经常会遇到这个需求.当大家用以前的套路在 iOS 8 上录音的时候,在模拟器上跑得挺好的,但是一上真机就跪了,为什么?因为真机底层 ...

  10. iOS开发 - RunLoop理解

    RunLoop概念 运行循环,一个 run loop 就是一个事件处理的循环,用来不停的调度工作以及处理事件 作用 保持程序的持续运行 监听处理App中的各种事件(触摸事件,定时器事件,selecto ...