使用 @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;
}
网友评论