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

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

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

我这里使用了nodejs的库

...

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

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

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

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

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

这个LoadingView方法

...

React Native 之 列表【ListView,NavigatorIOS】

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

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

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

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

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 
...

React 实现代码高亮

使用插件google的prettify和jquery的format 完成了一套很完美的代码高亮显示,还能自动格式化。


先说jquery.format的接入【我这里开发是用的webpack】

在引入文件中使用reqiure方法,把jquery.format加入到js代码中。

require('./jquery.format.js');

jquery.format.js 这个文件我放在了与引入文件同级的目录下

...

React Prop 验证

本文主要是引入官方的使用,如果此时间较晚,可到官方查看较新使用说明:

React.PropTypes 提供很多验证器 (validator) 来验证传入数据的有效性。当向 props 传入无效数据时,JavaScript 控制台会抛出警告。注意为了性能考虑,只在开发环境验证 propTypes。下面用例子来说明不同验证器的区别:

React.createClass({
  propTypes: {
 
...

分享React表单提交获取值的方式

很奇怪的,这个是要去自己发现的,我也是在摸索中发现的,其实React的使用,只有你发现了,才觉得好玩,最近的Reflux就是这样子的。

##表单提交部分

handleSubmit:function(e){
  e.preventDefault();
  var params = {};
  var keys = React.findDOMNode(this.refs.keys).value.trim(
...

React Pager分页实例

React的分页实例来了![适合与webpack组合使用,不太适合纯html页面调用,不过可以根据您自己的情况进行改写]

define(function(require,exports,module){
   'use strict';
   
    var React = require('reactAddons');
   
    module.exports = React.createC
...