我需要实现的是当登录页面传过来的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 2006 [NOI2010]超级钢琴——ST表+堆

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2006 每个右端点的左端点在一个区间内:用堆记录端点位置.可选区间,按价值排序:拿出一个后也许 ...

  2. bzoj4833

    $数论$ $这个题已经忘了怎么做了,也不想知道了,只记得看了3个小时$ $对于有gcd(f_i, f_j) = f_{gcd(i, j)}性质的数列,以下结论适用$ #include<bits/ ...

  3. ++i和i++的效率孰优孰劣

    在内建数据类型的情况下,效率没有区别: 在自定义数据类型的情况下,++i效率更高! 分析: (自定义数据类型的情况下) ++i返回对象的引用: i++总是要创建一个临时对象,在退出函数时还要销毁它,而 ...

  4. 在xshell中使用Linux语言打开错误提示

    上线项目到服务器后, 有时候有的功能跟本地调试的不一样,这时候就需要设置打开display_errors = On: 首先,cd .. 进入上一级,ll 罗列当前目录,跟home当前目录的有这个usr ...

  5. linux进程状态D和Z的处理

    长期生活在 Linux 环境里,渐渐地就有一种环保意识油然而生.比如,我们会在登录提示里写上"悟空,我跟你说过叫你不要乱扔东西,乱扔东西是不对的.哎呀我话没说完你怎么把 棍子扔掉了?月光宝盒 ...

  6. World CodeSprint 10

    C: 题意: 给定一个长度为 $n$ 的序列 $a_i$,从 $a$ 序列中选出一个大小为 $k$ 的子序列使得子序列数字的  bitwise AND 值最大. 求问最大值是多少,并求出有多少个最大值 ...

  7. 1.13-1.14 Hive Action

    一.Hive Action 1.创建文件 [root@hadoop-senior oozie-apps]# pwd /opt/cdh-5.3.6/oozie-4.0.0-cdh5.3.6/oozie- ...

  8. Multipath TCP on iOS11 : A closer look at the TCP Options(转)

    Multipath TCP uses a variety of TCP options to use different paths simultaneously. Several Multipath ...

  9. 3 pyspark学习---sparkContext概述

    1 Tutorial Spark本身是由scala语言编写,为了支持py对spark的支持呢就出现了pyspark.它依然可以通过导入Py4j进行RDDS等操作. 2 sparkContext (1) ...

  10. 【Hadoop】MapReduce笔记(四):MapReduce优化策略总结

    Cloudera 提供给客户的服务内容之一就是调整和优化MapReduce job执行性能.MapReduce和HDFS组成一个复杂的分布式系统,并且它们运行着各式各样用户的代码,这样导致没有一个快速 ...