我需要实现的是当登录页面传过来的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. TQ210——S5PV210 uboot顶层mkconfig分析

    转自:http://blog.csdn.net/wqx521/article/details/52491300 ############################################ ...

  2. 【220】◀▶ IDL 数组操作函数说明

    参考:Array Creation Routines —— 创建数组函数参考:Array Manipulation Routines —— 操作数组函数 01   MAX 最大值. 02   MIN ...

  3. 搭建Linux的VMware Workstation Pro

    搭建准备环境: 1.win10操作系统: 2.VMware Workstation Pro12: 下载地址   http://www.vmware.com/products/workstation/w ...

  4. 1.25-1.26 Coordinator数据集和oozie bundle

    一.Coordinator数据集 二.oozie bundle

  5. 1.3-1.4 hive环境部署

    一. 官网:http://hive.apache.org/ 下载:http://archive.apache.org/dist/hive/ GitHub:https://github.com/apac ...

  6. CodeForces 748C Santa Claus and Robot (思维)

    题意:给定一个机器人的行走路线,求最少的点能使得机器人可以走这样的路线. 析:每次行走,记录一个方向向量,每次只有是相反方向时,才会增加一个点,最后再加上最后一个点即可. 代码如下: #pragma ...

  7. qq开放平台可以应用到网页游戏的api整理

    创建角色界面api整理 一.需求描述 1.  创建角色名称可以用qq空间昵称代替 2.  如果玩家是在新区玩的话,赠送老玩家支持礼包 3.  可以看到,好友xxx也在玩,而且到了多少等级,如果加为好友 ...

  8. 在ANGULAR6中使用Echarts的正确方式之一

    这里的正确指的是不会在运行过程中报错,不会再prod模式下编译报错,不会再AOT模式下编译报错 个人环境说明: { "name": "angular-for-echart ...

  9. MecanimControl插件随笔

    ----------------------------------------- 4个animatorController是怎么回事? 分别对应 1镜像动画速度>0 2镜像播放速度<0 ...

  10. 移动平台unity3d优化

    目录(?)[-] Focus on GPUs 着眼于GPU Good practice 优秀的实践 Sharer optimizations 着色器优化 Focus on CPUs 着眼于CPUs G ...