总结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 ...
随机推荐
- [ZJOI 2007] 捉迷藏
[题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1095 [算法] 首先建出点分树,然后每一个点开两个堆.“第一个堆记录子树中所有节点到 ...
- Tinyplay
android里面的目录:external/tinyalsa 编译: 1. cd external/tinyalsa/ 2. vi Android.mk 3. mmm . 4. 拷贝出可执行文件 执行 ...
- POJ2217(最长公共子串)
Secretary Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 992 Accepted: 408 Descripti ...
- mysql函数之八:mysql函数大全
对于针对字符串位置的操作,第一个位置被标记为1. ASCII(str) 返回字符串str的最左面字符的ASCII代码值.如果str是空字符串,返回0.如果str是NULL,返回NULL. mysql& ...
- python -m json.tool 中文乱码 Format JSON with python
现在以 json 为数据传输格式的 RESTful 接口非常流行.为调试这样的接口,一个常用的办法是使用 curl 命令: curl http://somehost.com/some-restful- ...
- 推荐 BI Work
推荐阅读 BI Work 的文章,作为学习用 http://www.cnblogs.com/biwork
- URI is not registered (Settings | Languages & Frameworks | Schemas and DTDs)
URI is not registered (Settings | Languages & Frameworks | Schemas and DTDs) 有时候在IDEA中配置spring文件 ...
- python--flask学习1
1 windows/unix得安装 http://www.pythondoc.com/flask-mega-tutorial/helloworld.html http://www.pythondoc. ...
- css控制页面文字不能被选中user-select:none;
现象:html中可能有些地方不想让用户复制文字,或是用a标签做了个点击按钮,点快的时候文字会被选中,很丑,这个时候可以使用下面的方案禁止文字选中. 原因:鼠标点快了文字会被选中. 解决方案:不同的浏览 ...
- 第一次运行PHP项目(phpstorm+wampserver)
1.配置环境 1)vcredist_x64,wampserver2.5-Apache-2.4.9-Mysql-5.6.17-php5.5.12-64b,如下图 (1)安装vcredist_x64 ...