美文网首页
Mobx遇到的问题

Mobx遇到的问题

作者: 楼上那位 | 来源:发表于2017-05-08 21:41 被阅读136次

    使用 @observable 装饰的类型可以使字典和对象,数组等。
    使用字典的例子:

    export default class CustomChartStore implements ChartPropsInterface {
          @observable
          public selectedIndex: number;
          @observable
          public listData: any[];
          constructor(data: any[], index: number) {
                this.selectedIndex = index;
                this.listData = data;
          }
    }
       constructor(props: any) {
                super(props);
                  let arr: Array<any> = new Array<any>();
                for (let i = 0; i < 7; i++) {
                      arr.push({day:"4-21",date: "23.5",isSelected:false});
                }
    //这里只是赋值为字典
                this.model = new ChartModel(arr,6);
    
    
                this.model.listData = arr;
                this.model.selectedIndex = props.selectedIndex;
                    let item = this.model.listData[props.selectedIndex];
                    item.isSelected = true;// 修改item -字典的值,触发render
          }
    
          render() {
                return (
                      <View style={{ flex: 1 }}>
                            <Text> 每日收益</Text>
                            <View style={{ flex: 1, flexDirection: "row", justifyContent: "space-around", marginBottom: 0 }}>
                                  {this.model.listData.map(this.renderItem)}
                            </View>
                      </View>
    
                );
          }
    
          onPress(index: number) {
                const lastIndex = this.model.selectedIndex;
    
                let item = this.model.listData[lastIndex];
                item.isSelected = false;
                this.model.selectedIndex = index;
                item = this.model.listData[index];
                item.isSelected = true;
          }
    

    但是如果说对象里面嵌对象,就需要使用装饰器装饰最里面的对象。
    例如:

    // 这里只需要装饰`isSelected`
    export class ChartItem {
          date:string;
          earning:string;
      @observable    isSelected:boolean;
          constructor(d:string,e:string,sel:boolean= false){
                this.date = d;
                this.isSelected=sel;
                this.earning = e;
          }
    }
    export interface ChartPropsInterface {
          selectedIndex:number;
          listData:ChartItem[];
    
    }
    export default class CustomChartStore implements ChartPropsInterface  {
    
    public selectedIndex:number;
    
    public listData:ChartItem[];
    constructor(){
    
    }
    }
    
    // other file2.tsx
       constructor(props: any) {
                super(props);
                this.model = new ChartModel();
                let arr: Array<ChartItem> = new Array<ChartItem>();
                for (let i = 0; i < 7; i++) {
                      arr.push(new ChartItem("4-21", "23.5"));
                }
    
                this.model.listData = arr;
                this.model.selectedIndex = props.selectedIndex;
                    let item = this.model.listData[props.selectedIndex];
                    item.isSelected = true;
          }
    
          render() {
                return (
                      <View style={{ flex: 1 }}>
                            <Text> 每日收益</Text>
                            <View style={{ flex: 1, flexDirection: "row", justifyContent: "space-around", marginBottom: 0 }}>
                                  {this.model.listData.map(this.renderItem)}
                            </View>
                      </View>
    
                );
          }
    
          onPress(index: number) {
                const lastIndex = this.model.selectedIndex;
    
                let item = this.model.listData[lastIndex];
                item.isSelected = false;
                this.model.selectedIndex = index;
                item = this.model.listData[index];
                item.isSelected = true;
          }
    
    
    
    

    相关文章

      网友评论

          本文标题:Mobx遇到的问题

          本文链接:https://www.haomeiwen.com/subject/hjpvtxtx.html