总结React关于require的问题
我需要实现的是当登录页面传过来的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的问题的更多相关文章
- 关于React的require添加动态变化的路径
关于React的require添加动态变化的路径 直接这样写显然是不会有错误的 let path = require('../images/girl.png'); 但是如果你尝试着 var gg = ...
- ReactJS实践(一)—— FrozenUI React化之Loading组件
在前面我们通过四篇文章入门了React的大部分主要API,现在则开始进入实践环节. 实践系列的开篇打算拿我司的FrozenUI来试验,将其部分UI组件进行React化,作为第一篇实践文章,将以较简单的 ...
- React同构直出原理浅析
通常,当客户端请求一个包含React组件页面的时候,服务端首先响应输出这个页面,客户端和服务端有了第一次交互.然后,如果加载组件的过程需要向服务端发出Ajax请求等,客户端和服务端又进行了一次交互,这 ...
- React直出实现与原理
前一篇文章我们介绍了虚拟DOM的实现与原理,这篇文章我们来讲讲React的直出. 比起MVVM,React比较容易实现直出,那么React的直出是如何实现,有什么值得我们学习的呢? 为什么MVVM不能 ...
- React+Node初尝试
这是第一次写React和Node,选用的是前端Material-ui框架,后端使用的是Express框架,数据库采用的是Mongodb. 项目代码在:GitHub/lilu_movie 这是一个通过从 ...
- 【09】react 之 表单组件
不太清楚有多少初学React的同学和博主当时一样,在看完React的生命周期.数据流之后觉得已经上手了,甩开文档啪啪啪的开始敲了起来.结果...居然被一个input标签给教做人了. 故事是这样的:首先 ...
- 12步创建高性能Web APP
现在,Web App 日益重视用户的交互体验,了解性能优化的方式则可以有效提高用户体验.阅读和实践下面的性能优化技巧,可以帮你改善应用的流畅度.渲染时间和其他方面的性能表现. 概述 对 Web App ...
- ReactJS实用技巧(2):从新人大坑——表单组件来看State
不太清楚有多少初学React的同学和博主当时一样,在看完React的生命周期.数据流之后觉得已经上手了,甩开文档啪啪啪的开始敲了起来.结果...居然被一个input标签给教做人了. 故事是这样的:首先 ...
- Webpack 配置示例
Webpack 作为前端构建工具,对于大型网站开发,大大提升了开发效率.要使用webpack需要先安装webpack工具: 先来看一个最简单的命令 $ webpack main.js bundle.j ...
随机推荐
- package-info.java到底是什么
发现距离上一次在这里写博客已经三个多月了...说好的笔耕不辍呢=.= Anyway,今天(确切说是昨天晚上)在code review中被组里的QA II问到在一个叫做package-info.java ...
- 「LOJ#10015」「一本通 1.2 练习 2」扩散(并查集
题目描述 一个点每过一个单位时间就会向 444 个方向扩散一个距离,如图所示:两个点 a .b 连通,记作 e(a,b),当且仅当 a .b的扩散区域有公共部分.连通块的定义是块内的任意两个点 u.v ...
- zabbix snmp、jmx配置使用
SNMP: snmp是很古老的监控,我萌几乎可以在所有设备上看到它的身影 [root@linux-node1 ~]# yum install net-snmp net-snmp-libs net-sn ...
- Mice and Holes
题意: 有 $n$ 只老鼠和 $m$ 个鼠洞,第 $i$ 只老鼠的坐标为 $x_i$,第 $j$ 个鼠洞的坐标为 $p_j$ ,容量为 $c_j$. 第 $i$ 只老鼠钻进第 $j$ 个鼠洞的距离为 ...
- POJ - 3253 Fence Repair 优先队列+贪心
Fence Repair Farmer John wants to repair a small length of the fence around the pasture. He measures ...
- table对象
- E20190404-hm
prepend vt. 预先考虑,预先计划,预谋;
- 你了解SVN, CVS等版本控制器吗?
版本控制器SVN, CVS是两种版本控制器, 需要配套相关的SVN, CVS服务器, SCM是xcode里面配置版本控制的地方, 版本控制的原理就是A和B同时开发一个项目, A写完当天的代码之后把代码 ...
- iOS 8 录音重放出现 OSStatus error 1685348671 / 2003334207 问题的解决办法
许多录音类 APP 都提供录音回放功能,大家在做这类 APP 的时候也经常会遇到这个需求.当大家用以前的套路在 iOS 8 上录音的时候,在模拟器上跑得挺好的,但是一上真机就跪了,为什么?因为真机底层 ...
- iOS开发 - RunLoop理解
RunLoop概念 运行循环,一个 run loop 就是一个事件处理的循环,用来不停的调度工作以及处理事件 作用 保持程序的持续运行 监听处理App中的各种事件(触摸事件,定时器事件,selecto ...