总结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 ...
随机推荐
- CodeForces - 597C:Subsequences (主席树+DP)
For the given sequence with n different elements find the number of increasing subsequences with k + ...
- hibernate 中的拦截器EmptyInterceptor接口功能
Interceptor接口提供了从会话(session)回调(callback)应用程序(application)的机制, 这种回调机制可以允许应用程序在持久化对象被保存.更新.删除或是加载之前,检查 ...
- POJ2823(优先队列)
Sliding Window Time Limit: 12000MS Memory Limit: 65536K Total Submissions: 50738 Accepted: 14590 ...
- 给DataTable中添加一行数据
一.如果该DataTable有两列,列的名称是Name,Age,且该DataTable的名称是dt; DataRow dr = dt.NewRow(); dr["Name"] = ...
- web数据存储
数据的存储必然是任何网站必须经历的事,我们可以将数据存放在不同地方,数据库.文件.内存.程序本身.cookie,session中都可以,但是只要需要持久化保留的数据,那么最终肯定还是落在磁盘之上的,我 ...
- B. One Bomb (#363 Div.2)
B. One Bomb time limit per test 1 second memory limit per test 256 megabytes input standard input ou ...
- JAVA中的BIO,NIO,AIO
在了解BIO,NIO,AIO之前先了解一下IO的几个概念: 1.同步 用户进程触发IO操作并等待或者轮询的去查看IO操作是否就绪, 例如自己亲自出马持银行卡到银行取钱 2.异步 用户触发IO操作以后, ...
- 201621123016 《Java程序设计》第6周学习总结
1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图或相关笔记,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但概念之间的联系要清晰 ...
- UnityEngine中Animator相关类的说明
---------------------------------------------------------------------- Animator 这个单独写,比较多 AnimationC ...
- Ogre 简易角色Demo
参考Sample中的角色类,使用ExampleApplication.h改写,只编译了release,debug在配置文件名字上有不同 遗留一个问题 mBodyEnt->getSkeleton( ...