我需要实现的是当登录页面传过来的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. python 基础之第十一天(面向对象)

    #############面向对象##################### 类: In [1]: class MyClass(object): ##用class定义一个类 ...: def psta ...

  2. BZOJ_3781_小B的询问_莫队

    BZOJ_3781_小B的询问_莫队 Description 小B有一个序列,包含N个1~K之间的整数.他一共有M个询问,每个询问给定一个区间[L..R],求Sigma(c(i)^2)的值,其中i的值 ...

  3. 蓝桥杯 2014本科C++ B组 奇怪的分式 暴力枚举

    蓝桥杯 枚举 奇怪的分式 标题:奇怪的分式 上小学的时候,小明经常自己发明新算法.一次,老师出的题目是: 1/4 乘以 8/5 小明居然把分子拼接在一起,分母拼接在一起,答案是:18/45 (参见图1 ...

  4. 八、MyEclipse多次重装、删除注册表、重装系统激活都不成功,终极解决方法 - imsoft.cnblogs

    MyEclipse(2010,2014)激活不成功的结论: [问题原因]激活不成功时,主要是激活的密钥文件.myeclipse.properties不在指定的位置.(一般都在D.E.F.G等盘符根目录 ...

  5. TypeScript完全解读(26课时)_14.ES6和Nodejs中的模块

    创建modules文件夹,我们的文件都写在这里面 modules下面新建index.js文件,在index.ts内引入这个js文件 es6的模块 最主要的两个关键字 import和export imp ...

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

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

  7. CCF 201509-1 数列分段 (水题)

    问题描述 给定一个整数数列,数列中连续相同的最长整数序列算成一段,问数列中共有多少段? 输入格式 输入的第一行包含一个整数n,表示数列中整数的个数. 第二行包含n个整数a1, a2, …, an,表示 ...

  8. .NET 5 - 下一代.NET

    不知不觉中微软已经计划推出了下一代的.NET了,我们先来看一下新的.NET有包含什么 What's new in .NET 5? .NET 5将会引入新的APIs,运行时功能和新的语言特色. 在运行时 ...

  9. shell初级-----更多结构化命令

    for命令 bash shell提供了for命令,允许你创建一个遍历一系列的循环. for var in list do commands done 1.读取列表中的值 for命令最基本的用法就是遍历 ...

  10. 跟我学: 使用 fireasy 搭建 asp.net core 项目系列之二 —— 准备

    ==== 目录 ==== 跟我学: 使用 fireasy 搭建 asp.net core 项目系列之一 —— 开篇 跟我学: 使用 fireasy 搭建 asp.net core 项目系列之二 —— ...