我需要实现的是当登录页面传过来的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. bzoj 4756 [Usaco2017 Jan]Promotion Counting——线段树合并

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4756 线段树合并裸题.那种返回 int 的与传引用的 merge 都能过.不知别的题是不是这 ...

  2. ubuntu解决挂起后不能唤醒

    安装 laptop-mode 如果你不缺认自已是否安装了laptop-mode-tools工具包,可以在终端中输入下列命令来确认是否安装. dpkg -l | grep laptop-mode-too ...

  3. SSIS 增量更新

    本文转自 http://sqlblog.com/blogs/andy_leonard/archive/2007/07/09/ssis-design-pattern-incremental-loads. ...

  4. Adventure Works 教程

    多维建模(Adventure Works 教程)     欢迎使用 Analysis Services 教程. 本教程通过在所有示例中使用虚构公司 Adventure Works Cycles,说明如 ...

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

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

  6. ESXI中 Linux虚拟机不重启扩展磁盘

    1.首先对虚拟机进行编辑设置 硬盘大小进行修改到80G: 2.在Linux系统中查看磁盘大小 此时并没有什么变化: 3. 上面没有变化的原因,是因为需要重新扫描存储设备的scsi总线: 找到scsi磁 ...

  7. 计算机图形学DDA画线法+中点画线法+Bresenham画线法

    #include <cstdio> #include <cstring> #include <conio.h> #include <graphics.h> ...

  8. java web 学习-网络资源

    [网络收集] 1. JavaWeb学习总结——JSP中的九个内置对象 2. Jsp九大内置对象以及四个作用域 他人学习汇总资源 1. http://www.cnblogs.com/xdp-gacl/t ...

  9. vue仿淘宝地址选择组件

    Vue组件:省市区地址选择组件 <template> <div v-show="addressSelectShow" :style="{'left': ...

  10. 豆瓣api获取图片403

    1.问题描述 豆瓣的图片资源在网页中不能正常显示,403禁止访问,把地址放到浏览器中就可以正常访问了? 原因是豆瓣现在有防盗链 2.解决问题 在页面中加上 <meta name="re ...