PenZ's Space

万物归一

0%

发表于 分类于 ， Disqus：

react websocket组件容器
提供 onOpen，onMessage,onError,onClose等方法,
是一个轻便的websocket组件
支持重连功能

react-simple-websocket

A simple websocket component for React

Installation

$ npm install react-simple-websocket --save
$ yarn add react-simple-websocket

Usage

import React from 'react';
import SimpleWS from 'react-simple-websocket';

export default class Example extends React.Component {
  constructor(props) {
    super(props);
    const that = this;

    that.state = {
      wsData: "",
    };

    that.sender = null;
  }

  onMessage = data => {
    const that = this;

    //get the data from ws
    that.setState({
      wsData: data
    });
  };

  onOpen = sender => {
    const that = this;
    that.sender = sender;

    //use sender to send your data
    sender("xxxxx");
  };

   onClick = () => {
    const that = this;

    that.sender('halo,it's me!');
  };

  render() {
    return (
      <div>
        <SimpleWS
          url="ws://localhost:8080"
          onOpen={that.onOpen}
          onMessage={that.onMessage}
          onClose={that.onClose}
        />
        <button onClick={that.onClick}>send</button>
      </div>
    );
  }
};

Properties

static propTypes = {
  url: PropTypes.string.isRequired,
  onOpen: PropTypes.func,
  onMessage: PropTypes.func.isRequired,
  onError: PropTypes.func,
  onClose: PropTypes.func,
  debug: PropTypes.bool,
  reconnect: PropTypes.bool
};

static defaultProps = {
  debug: false,
  reconnect: true
};

License

MIT

发表于 分类于 Disqus：

自我纠结了很久，在一瞬之间做出了决定。
斥巨资购买了一把练习琴，同时寻觅一位老师求学解惑。
总觉得这个决定可能会对人生路带来不同的可能。
源于喜爱，始于迷茫。
重新开始，忘掉之前。
也希望各位在有生之年，如有一瞬的激动或者梦想就去尝试下。
也许不一定非要成功，也许不一定可以成功。
但是，短暂的人生需要那么一闪而过的光芒。
cookbook.png

发表于 分类于 Disqus： 
//invoke 为一个promise 函数
export function get_account_auth(authKey) {
  const arg = { authKey };

  return invoke("account_auth", arg)
    .then(resp => resp.data.token)
    .catch(onError);
}
 ======
effects: {
    *getAuthKey({ payload }, { call, put, race, select, take }) {
      const resp = yield call(IndexApi.getAuthKey, {});
      
      //call(fn,...arg)
      const token = yield call(Get_account_auth, resp.data.authKey);

      yield put(StateAt.index({ authKey: resp.data.authKey, token }));
    },
},

下面 dva 的典型 model 例子

app.model({
  namespace: "todo",
  state: [],
  reducers: {
    add(state, { payload: todo }) {
      // 保存数据到 state
      return [...state, todo];
    }
  },
  effects: {
    *save({ payload: todo }, { put, call }) {
      // 调用 saveTodoToServer，成功后触发 `add` action 保存到 state
      yield call(saveTodoToServer, todo);
      yield put({ type: "add", payload: todo });
    }
  },
  subscriptions: {
    setup({ history, dispatch }) {
      // 监听 history 变化，当进入 `/` 时触发 `load` action
      return history.listen(({ pathname }) => {
        if (pathname === "/") {
          dispatch({ type: "load" });
        }
      });
    }
  }
});

发表于 分类于 Disqus：

RunKit -- 超好用的在线代码编辑器，支持几万个npm包，在线即可引入

使用截图：

发表于 分类于 Disqus：

react 学习笔记--组合
有些组件无法提前知晓它们子组件的具体内容。
可以使用一个特殊的 children prop 来将他们的子组件传递到渲染结果中：

阅读全文 »

发表于 分类于 Disqus：

碰到项目需要给输入框一个小效果类似这个

floatInput

大概思路将label绝对定位到input输入框内，点击input框后用transform将label缩小并上移
欢迎去npm下载使用插件 react-float-input 😊

$ yarn add react-float-input
$ npm install react-float-input
阅读全文 »