我需要实现的是当登录页面传过来的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. [ZJOI 2007] 捉迷藏

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1095 [算法] 首先建出点分树,然后每一个点开两个堆.“第一个堆记录子树中所有节点到 ...

  2. Tinyplay

    android里面的目录:external/tinyalsa 编译: 1. cd external/tinyalsa/ 2. vi Android.mk 3. mmm . 4. 拷贝出可执行文件 执行 ...

  3. POJ2217(最长公共子串)

    Secretary Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 992   Accepted: 408 Descripti ...

  4. mysql函数之八:mysql函数大全

    对于针对字符串位置的操作,第一个位置被标记为1. ASCII(str) 返回字符串str的最左面字符的ASCII代码值.如果str是空字符串,返回0.如果str是NULL,返回NULL. mysql& ...

  5. python -m json.tool 中文乱码 Format JSON with python

    现在以 json 为数据传输格式的 RESTful 接口非常流行.为调试这样的接口,一个常用的办法是使用 curl 命令: curl http://somehost.com/some-restful- ...

  6. 推荐 BI Work

    推荐阅读 BI Work 的文章,作为学习用 http://www.cnblogs.com/biwork

  7. URI is not registered (Settings | Languages & Frameworks | Schemas and DTDs)

    URI is not registered (Settings | Languages & Frameworks | Schemas and DTDs) 有时候在IDEA中配置spring文件 ...

  8. python--flask学习1

    1 windows/unix得安装 http://www.pythondoc.com/flask-mega-tutorial/helloworld.html http://www.pythondoc. ...

  9. css控制页面文字不能被选中user-select:none;

    现象:html中可能有些地方不想让用户复制文字,或是用a标签做了个点击按钮,点快的时候文字会被选中,很丑,这个时候可以使用下面的方案禁止文字选中. 原因:鼠标点快了文字会被选中. 解决方案:不同的浏览 ...

  10. 第一次运行PHP项目(phpstorm+wampserver)

    1.配置环境 1)vcredist_x64,wampserver2.5-Apache-2.4.9-Mysql-5.6.17-php5.5.12-64b,如下图 (1)安装vcredist_x64   ...