0.0.3 • Published 5 years ago
bindmodel v0.0.3
react 数据绑定props插件,兼容子父多个路由绑定props。
插件依赖于 dva 安装dva
npm i dva -S
如何使用?
在任何页面使用 this.$bind(key,value) 就可以绑定到this.props.bindModel;
在入口index文件配置
import React from 'react';
import dva from 'dva';
const app = dva();
//引入插件,返回model 和 bind 绑定函数
import {model,bind} from 'bindmodel';
//修改model名称 默认bindModel,此步可以忽略。
model.namespace ='bindModel';
//注册 dva model;
app.model(model);
//挂载全局函数
React.Component.prototype.$bind = bind;
在路由页面(bindModel 就是 注册model名字)
import React from 'react';
import { connect } from 'dva';
@connect(({ bindModel }) => ({ bindModel }))
export default class IndexPage extends React.Component {
constructor (props) {
super(props);
this.state = {
}
}
bindFun(){
this.$bind('type','123');
}
async getdata(){
//接口数据绑定案例
const p = await request('api/xxxxx');
p.then((res)=>{
this.$bind('list',res.data);
})
}
render(){
const { list,type } =this.props.bindModel;
return (
<div >
<h1 onClick={this.bindFun.bind(this)}>
你好我是绑定的值: {type}
</h1>
{
list && list.map((item,index)=>{
return (<div key={index}>{item}</div>)
})
}
</div>
);
}
};