white-bull v1.0.3

white-bull

React Component 与 data 的连接器。

use

import React from 'react'
import {render} from 'react-dom'

import {connection, dispatch, Module} from 'white-bull'

class Hello extends React.Component{
  render(){
    //say 自动绑定到props上
    let {say} = this.props;
    return <div>{say.text}</div>
  }
}

// extends Module
class HelloModule extends Module {
  constructor(namespace){
    super(namespace)
    this.state = {
      text:"hello world"
    }
  }
}

//把 HelloModule 中的 state 绑定到 Hello 的 props.say 中
let App = connection(Hello, new HelloModule("say"));

render(<App/>, document.getElementById("#root"));

API

• Module

继承 Module 可指定默认 state, 添加其他操作state的方法

  class HelloModule extends Module{
    constructor(namespace){
      super(namespace)
      //default props
      this.state = {

      }
    }
    //....
    update(){
      //update state
      this.setState({

      })
    }
  }

• connection

链接组件与Module, module需要指定命名空间，命名空间作为props的属性,和dispatch的参数前缀

  class Hello extends React.Component{
    render(){
      // this.props.hello
    }
  }

  connection(Hello, new HelloModule("hello"))

• dispatch

触发动作

  //这里触发了相当于调用了 new HelloModule("hello") 这个实例的 .update(arg1, arg2)方法
  dispatch("hello.update", arg1, arg2);

Example

• all example

  • todo.js
  • wikipedia search.js