Question

我希望有一个侧边菜单，其中包含一个类别列表，当用户选择一个类别时，它应该在类别名称的正下方打开一个可滚动的列表，其中包含该类别的所有部分。

所以我创建了两个列表组件，一个用于类别（SideMenuList），另一个用于家具。我想我需要使用条件渲染来在用户选择类别时渲染第二个列表。

我的代码：

app.js的侧边菜单代码

state = {
  hideMenu: null,
  hideList: null
}

sideMenuShow() {

     if(!this.state.hideMenu) {
        return(
        <SideMenu> 
          <MenuButton onPress = {() => this.setState({hideMenu: true})}/>
          <Text style = {{color: 'white', fontSize: 16, fontWeight: 'bold'}}>Furniture</Text>
          <SideMenuList onPress = {() => this.setState({hideList: true})}>
            {
              this.state.hideList ? console.log('yes') : null
            }
          </SideMenuList>
        </SideMenu>
        ); 
      }
     else {
         return(
          <SmallSideMenu> 
            <MenuButton onPress = {() => this.setState({hideMenu: false})}/>
          </SmallSideMenu>
         );
     }
 }

SideMenuList.js

import React, { Component } from 'react';
import { View, FlatList, Text, TouchableOpacity } from 'react-native';
import { CardSection } from './common';
import SideMenuItem from './SideMenuItem';

class SideMenuList extends Component {

render()  {
    return (
        <View style = {{flex: 1}}>
          <FlatList
            style = {{marginBottom: 2}} 
            data={[
            {key: 'Test'},
            {key: 'Test2'},
            {key: 'Test3'},
            {key: 'Test4'},
            {key: 'Test5'}
            ]}
          renderItem={({item}) => 
          <TouchableOpacity>
              <SideMenuItem 
              onPress = {this.props.onPress}
              text={item.key}
              >
              {this.props.children}
              </SideMenuItem>
          </TouchableOpacity>}
        />
      </View>
    );
  }
}

export default SideMenuList;

SideMenuItem.js代码

import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';

const SideMenuItem = (props, {onPress}) => {
return (  
  <View 
  style = {{flex: 1}}>
  <TouchableOpacity
  onPress = {onPress}>
    <Text style={styles.itemStyle}>{props.text}</Text>
  </TouchableOpacity>
  {props.children}
  </View>
);
}

const styles = {
  itemStyle: {
    marginTop: 10,
    marginRight: 20,
    marginLeft: 10,
    color: 'white' 
   }
};

export default SideMenuItem;

我现在的问题是我的onPress事件没有改变我的州财产＆＃39; hideList＆＃39;的值，所以我甚至无法检查我的解决方案是否真的有效。当值为true时，我正在执行控制台日志，但它从未出现在我的控制台中。

提前致谢。

Answer 1

您正在使用SideMenuItem将TouchableOpacity包裹起来（在您的SideMenuList文件中）。{/ p>

当您按下按钮时，它可能会触发SideMenuList按钮，而不是SideMenuItem按钮。

尝试从SideMenuList中删除TouchableOpacity并检查它是否有效。

希望有所帮助

React Native条件渲染不起作用

1 个答案: