总结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 ...
随机推荐
- TQ210——S5PV210 uboot顶层mkconfig分析
转自:http://blog.csdn.net/wqx521/article/details/52491300 ############################################ ...
- 【220】◀▶ IDL 数组操作函数说明
参考:Array Creation Routines —— 创建数组函数参考:Array Manipulation Routines —— 操作数组函数 01 MAX 最大值. 02 MIN ...
- 搭建Linux的VMware Workstation Pro
搭建准备环境: 1.win10操作系统: 2.VMware Workstation Pro12: 下载地址 http://www.vmware.com/products/workstation/w ...
- 1.25-1.26 Coordinator数据集和oozie bundle
一.Coordinator数据集 二.oozie bundle
- 1.3-1.4 hive环境部署
一. 官网:http://hive.apache.org/ 下载:http://archive.apache.org/dist/hive/ GitHub:https://github.com/apac ...
- CodeForces 748C Santa Claus and Robot (思维)
题意:给定一个机器人的行走路线,求最少的点能使得机器人可以走这样的路线. 析:每次行走,记录一个方向向量,每次只有是相反方向时,才会增加一个点,最后再加上最后一个点即可. 代码如下: #pragma ...
- qq开放平台可以应用到网页游戏的api整理
创建角色界面api整理 一.需求描述 1. 创建角色名称可以用qq空间昵称代替 2. 如果玩家是在新区玩的话,赠送老玩家支持礼包 3. 可以看到,好友xxx也在玩,而且到了多少等级,如果加为好友 ...
- 在ANGULAR6中使用Echarts的正确方式之一
这里的正确指的是不会在运行过程中报错,不会再prod模式下编译报错,不会再AOT模式下编译报错 个人环境说明: { "name": "angular-for-echart ...
- MecanimControl插件随笔
----------------------------------------- 4个animatorController是怎么回事? 分别对应 1镜像动画速度>0 2镜像播放速度<0 ...
- 移动平台unity3d优化
目录(?)[-] Focus on GPUs 着眼于GPU Good practice 优秀的实践 Sharer optimizations 着色器优化 Focus on CPUs 着眼于CPUs G ...