递归调用React中的类
递归调用React中的类
提问于 2019-02-27 16:07:52
我有一个JSON对象存储我的菜单。默认情况下，将显示第一个菜单。在按下任何菜单项时，我想显示针对"seq“定义的菜单号。这是我的JSON文件**menu.json“
{"main":
[
{"mid": 0, "menu":
[
{"id": "1", "title": "Item-1-0", "kw": "Item-1", "type" : "M", "seq" : 1},
{"id": "2", "title": "Item-2", "kw": "Item-2", "type" : "M", "seq" : 2},
{"id": "3", "title": "Item-3", "kw": "Item-3", "type" : "M", "seq" : 3},
{"id": "4", "title": "Item-4", "kw": "Item-4", "type" : "M", "seq" : 4},
{"id": "5", "title": "Item-5", "kw": "Item-5", "type" : "M", "seq" : 5},
{"id": "6", "title": "Item-6", "kw": "Item-6", "type" : "M", "seq" : 6},
{"id": "7", "title": "Item-7", "kw": "Item-7", "type" : "M", "seq" : 7},
{"id": "8", "title": "Item-8", "kw": "Item-8", "type" : "M", "seq" : 8}
]
},
{"mid": 1, "menu":
[
{"id": "1", "title": "Item-1-1", "kw": "Item-1", "type" : "M", "seq" : 8},
{"id": "2", "title": "Item-2", "kw": "Item-2", "type" : "M", "seq" : 9},
{"id": "3", "title": "Item-3", "kw": "Item-3", "type" : "M", "seq" : 10},
{"id": "4", "title": "Item-4", "kw": "Item-4", "type" : "M", "seq" : 11},
{"id": "5", "title": "Item-5", "kw": "Item-5", "type" : "M", "seq" : 12},
{"id": "6", "title": "Item-6", "kw": "Item-6", "type" : "M", "seq" : 13},
{"id": "7", "title": "Item-7", "kw": "Item-7", "type" : "M", "seq" : 14},
{"id": "8", "title": "Item-8", "kw": "Item-8", "type" : "M", "seq" : 15}
]
},
{"mid": 3, "menu":
[
{"id": "1", "title": "Item-1-2", "kw": "Item-1", "type" : "M", "seq" : 16},
{"id": "2", "title": "Item-2", "kw": "Item-2", "type" : "M", "seq" : 17},
{"id": "3", "title": "Item-3", "kw": "Item-3", "type" : "M", "seq" : 18},
{"id": "4", "title": "Item-4", "kw": "Item-4", "type" : "M", "seq" : 19},
{"id": "5", "title": "Item-5", "kw": "Item-5", "type" : "M", "seq" : 20},
{"id": "6", "title": "Item-6", "kw": "Item-6", "type" : "M", "seq" : 21},
{"id": "7", "title": "Item-7", "kw": "Item-7", "type" : "M", "seq" : 22},
{"id": "8", "title": "Item-8", "kw": "Item-8", "type" : "M", "seq" : 23}
]
},
{"mid": 4, "menu":
[
{"id": "1", "title": "Item-1-3", "kw": "Item-1", "type" : "M", "seq" : 24},
{"id": "2", "title": "Item-2", "kw": "Item-2", "type" : "M", "seq" : 25},
{"id": "3", "title": "Item-3", "kw": "Item-3", "type" : "M", "seq" : 26},
{"id": "4", "title": "Item-4", "kw": "Item-4", "type" : "M", "seq" : 27},
{"id": "5", "title": "Item-5", "kw": "Item-5", "type" : "M", "seq" : 28},
{"id": "6", "title": "Item-6", "kw": "Item-6", "type" : "M", "seq" : 29},
{"id": "7", "title": "Item-7", "kw": "Item-7", "type" : "M", "seq" : 30},
{"id": "8", "title": "Item-8", "kw": "Item-8", "type" : "M", "seq" : 31}
]
}
]
}我的App.js文件如下：
import React from 'react';
import { Button, View, Text } from 'react-native';
import GetMenu from "./fetchmenu.js";
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<View style={{ flex: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
{<GetMenu/>}
</View>
</View>
);
}
}
export default HomeScreen;GetMenu类在这个文件fetchmenu.js中。
import React from 'react';
import { FlatList, ActivityIndicator, Text, View, TouchableOpacity } from 'react-native';
let dataSource = require('./menu.json');
let menuLevel = 0;
export default class GetMenu extends React.Component {
constructor(props){
super(props);
}
render(){
return(
<View style={{flex: 1, paddingTop:20}}>
<FlatList
data={dataSource.main[menuLevel].menu}
renderItem={({item}) =>
(
<TouchableOpacity onPress={ () => actionOnRow(item)}>
<Text>{item.title}, {item.kw}, {item.seq}</Text>
</TouchableOpacity>
)}
keyExtractor={({id}, index) => id}
/>
</View>
);
}
}
function actionOnRow(item) {
menuLevel = item.seq;
alert(item.title + "-" + menuLevel);
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<View style={{ flex: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
{<GetMenu/>}
</View>
</View>
);
}
}它在actionOnRow函数中的呈现()上崩溃。
我是否应该以不同的方式来做它，而不是递归地调用actionOnRow OnPress？
编辑
过了这个阶段之后，我想在基于"type“的actionOnRow()中添加一个条件。一个"M“值将调用下一个菜单，一些其他值(如"L”)将调用一个外部JSON来显示Audios的列表。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-02-28 05:13:20
让我先告诉你什么是你的错误。当按下菜单时，您正在尝试呈现组件。但是在菜单按下事件中调用呈现函数，但不能在onPress事件中调用。您可以在这里设置一些标志，指示是否呈现内部菜单。在代码中，应该是这样的：
//render item of your flatList
<TouchableOpacity onPress={ () => this.setState({renderMenu:true,menuItem:item})}>
<Text>{item.title}, {item.kw}, {item.seq}</Text>
</TouchableOpacity>
//place where you want to render your menu
{this.state.renderMenu&&actionOnRow(this.state.menuItem)}交替
您可以将当前菜单存储到您的状态，并在按下菜单时更新它。示例代码：
state={currentMenu:dataSource.main[menuLevel].menu}
<FlatList
data={this.state.currentMenu}
renderItem={({item}) =>
(
<TouchableOpacity onPress={ () => this.setState({currentMenu:item})}>
<Text>{item.title}, {item.kw}, {item.seq}</Text>
</TouchableOpacity>
)}
keyExtractor={({id}, index) => id}
/>注意:我没有测试所有的代码。他们只是个例子。如果你不明白的话请告诉我。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54909733
复制相关文章
相似问题
腾讯云开发者
