[英]Controller of components based on array input (React native)
我正在嘗試構建報告控制器,它根據子組件的 state.reports 路由到詳細組件
我的概念是這樣的
1 - render the top level of array
2 - each array element is clickable and call function **route**
- if element has children set state to child array and go to step 1
- else go to detail page
3 - if we are at child array we show **back button** that can return to previous render.
這是我的控制器
export default class ReportControler extends React.Component {
state = {reports: [] }
componentWillMount() {
this.parent = null;
this.path = [this.constructor.name];
}
route = (report) =>{
if(report.children) return this.moveToChild(report);
this.props.navigation.navigate('ReportDetails', this.path.join('/') + '/' + report.title);
}
moveToChild = (report) => {
this.parent = this.state.reports;
this.path.push(report.title);
this.setState({reports: report.children});
}
moveToParent = () => {
this.setState({reports: this.parent});
this.parent = null;
this.path.pop();
}
render(){
const reports = this.state.reports.map(report => (
<TouchableWithoutFeedback onPress={() => { this.route(report) }} >
<View><Box title={report.title} image={report.image} /></View>
</TouchableWithoutFeedback >
));
let back = null;
if(this.parent){
back = <TouchableWithoutFeedback onPress={this.moveToParent} >
<View>
<Text style={{color: '#274496', fontSize: 20, padding: 10, borderBottom: '#274496', borderBottomWidth: 2 }}>{this.path.join(' / ') }</Text>
</View>
</TouchableWithoutFeedback >
}
return(
<View style={{flex: 1}}>
{back}
<View style={{flexDirection: 'row', flexWrap: 'wrap'}}>
{reports}
</View>
</View>
);
}
}
子組件將像這樣工作
export default class Leads extends ReportController {
state = {reports: [
{title:"Campaign", image: require('../../assets/Report/bullhorn.png') },
{title:"Status", image: require('../../assets/Report/analysis.png') },
{title:"Source", image: require('../../assets/Report/wind-turbine.png') },
{title:"Location", image: require('../../assets/Report/route.png') },
{title:"Device", image: require('../../assets/Report/responsive.png') },
{
title:"Time", image: require('../../assets/Report/statistics.png'),
children: [
{title:"Days", image: require('../../assets/Report/statistics.png')},
{title:"Hours", image: require('../../assets/Report/statistics.png')},
]
},
]
}
}
我現在的問題是關於移動功能。
此功能在 2 級以上不起作用
如何設置this.parent
數組?
moveToParent = () => {
this.setState({reports: this.parent});
this.parent = null; //Here I should set the parent array
this.path.pop();
}
我不得不通過將它們存儲在數組中來修復父母
這是我所做的
componentWillMount() {
this.parents = [];
this.path = [this.constructor.name];
}
moveToChild = (report) => {
this.parents.push(this.state.reports);
this.path.push(report.title);
this.setState({reports: report.children});
}
moveToParent = () => {
const reports = this.parents.pop();
this.setState({reports});
this.path.pop();
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.