React中上传图片到qiniu(2017-05-10更新)

之前有写过类似的一篇文章,有位同学突然找来解惑,发现自己采用了另外的一个方法,这里也分享下,希望对使用reactjs的同学有帮助。

逻辑思路是这样子的,在componentDidMount中实现更新dom的操作,异步加载需要的资源文件,然后在加载完后实现qiniu的初始化操作。这里就不需要在webpack或者其他打包工具中去引入qiniu的包文件,导致打完包的文件过大了。

我这里使用了nodejs的库

...

react-router 之 routerWillLeave 实现 自定义Dialog

react-router 可以在 react中起到路由的作用,同时也有一个routerWillLeave,这个函数帮助我们再处理路由的时候,离开某个路由要做的某个判断起到了很好的作用,但是version 2 才有这个功能,这里记录下如何自定自己弹出框。


由于react-router自带的功能不是很好,需要我们自己处理一下,于是google参考了stackoverflow上的一篇文章,先建立一个函数

f
...

Reactjs 在 Browser 环境下是如何开发的

以前使用reactjs做前端开发都是webpack打包然后在运行,这样的好处是,你开发的环境是一个纯碎在写nodejs的感觉,而且还能应用很多ES6的新特性,岂不快哉!

最近在做后端,也由于使用webpack时间长,一直没有找到很好的办法去解决,自动打包缓慢的问题,还有就是每次开发你都要去根据具体情况写要给跟webpack相关的config文件。

于是就试着用Browser的环境进行开发,结果今天尝试

...

React 0.14 mocha组建单元测试(二)

使用react的情况下,一般也会用到redux,那么对于这种在react中使用redux的情况,写测试的时候就不能只用之前的文章里面介绍的方式写了。

来看下组件例子

import React, { Component, findDOMNode } from 'react'
import { connect } from 'react-redux'
import { increase, decrease
...

React Native 之 状态指示器【加载数据的状态等待】

结合上几篇博文,今天学习下,如果来优化一下我们的状态指示器。

前面几篇文章,在renderLoadingView方法中,直接使用了一个View,然后加了一个简单的字符串进行提示,看起来还是简陋的很。

修改之后,这个方法的代码如下:

renderLoadingView:function(){
  return (
    <LoadingView />    
  );
},

这个LoadingView方法

...

React Native 之 列表【ListView 添加 点击列表跳转到指定视图】

上一篇文章中我们了解了一下,简单的添加列表,但是列表添加了,点击列表没有什么反应啊,这不就没啥作用了,这里记录下如何实现点击的效果。

React Native中有个组件叫做TouchableHighlight,一看这名字就知道干啥的了,然后我们在这上面加一个touch的事件。

这里我把上一节的renderMovie的方法代码列到这里:

renderMovie:function(movie){
    r
...

React Native 之 列表【ListView,NavigatorIOS】

React-Native最近看了下他的ListView组件,记录下自己实现的小小功能:

一个简单的列表都没啥特别的了,这里添加一个导航。

首先使用NavigatorIOS组件,给我们的首页添加一个导航

var WalkerfreeProject = React.createClass({
  render:function(){
    return (
      <NavigatorIOS
    
...

Koa+React实现form表单上传文件

在nodejs里面通过html的表单上传图片,跟php比较起来还是麻烦一些,特别是在react中使用表单提交含有文件的数据。

最近也在做这个操作,找了很多资料,一直都是有个co-busboy这个,其实它也是基于busboy去封装的,不过这个更适合在koa里面使用。

以往的表单提交,我们用浏览器去debug的时候,会看到,提交了一个post提交的数据,这个一般只是值的提交,不包括有文件,但是在react

...

React中上传图片到qiniu

在React中使用qiniu上传图片,实现方式有很多种,一种是在web端实现上传,一种是在server端实现上传

这里我说下我是如何在web端实现上传图片到七牛的

七牛的官方已经有了javascript的使用说明我这里就不重复了。

使用React首先是要把qiniu提供的js引入,由于我这里是使用的webpack,所以我就直接放在了引入文件中,

这样我就可以全局引用了。

require('./qiniu.j
...

react innerHtml 赋值操作

使用react的时候,总有一些变量是html的字符串,但是我们却想要实现innerHtml的类似方法,直接用html进行渲染。

这里react提供了一个dangerouslySetInnerHTML方法,可以实现此赋值操作。具体详情可以自己去google一个下,关键字:'react dangerouslySetInnerHTML'.

下面是我为记录的一个示例,可以作为一个简单的demo了。

const 
...