Question

我正在尝试在React Native中切换Modal。平面清单中的每个项目都应具有切换选项以打开模式。

我得到了错误： JSX表达式必须具有一个父元素。

我试图用谷歌搜索正确的语法，但是找不到解决方案。

class CategoriesScreen extends Component {

  state = {
    modalVisible: false,
  };

  setModalVisible(visible) {
    this.setState({ modalVisible: visible });
  }

  render() {
function Item({ title }) {
      return (
        <TouchableOpacity style={styles.item} onPress={() => {
          this.setModalVisible(true);
        }}>
          <View>
            <Text style={styles.title}>{title}</Text>
          </View>
        </TouchableOpacity> 
        <Modal
          animationType="slide"
          transparent={false}
          visible={this.state.modalVisible}
          onRequestClose={() => {
            Alert.alert('Modal has been closed.');
          }}>
          <View style={{ marginTop: 22 }}>
            <View>
              <Text>Hello World!</Text>

              <TouchableOpacity
                onPress={() => {
                  this.setModalVisible(!this.state.modalVisible);
                }}>
                <Text>Hide Modal</Text>
              </TouchableOpacity>
            </View>
          </View>
        </Modal>
    };
    return (
      <SafeAreaView style={styles.container}>
        <Text style={styles.heading}>Select a category for daily tasks.</Text>
        <Text style={styles.subheading}>{`You will receive a daily task in this category.\nLet’s get consistent!`}</Text>
        <FlatList
          data={DATA}
          renderItem={({ item }) => <Item title={item.title} />}
          keyExtractor={item => item.id}
          numColumns={2}
        />
      </SafeAreaView>
    );
  }
}

我正在尝试为清单中的每个项目打开一个唯一的模式。

Answer 1

您只能返回一个实体。要解决此问题，只需在Item函数中使用<Fragment/>元素（来自react包）将返回值括起来即可。

片段使您可以将子级列表分组，而无需向DOM添加额外的节点。

可以这样做：

import React, {Fragment} from 'react';
... 
function Item({ title }) {
    return (
      <Fragment>
        <TouchableOpacity style={styles.item} onPress={() => {
          this.setModalVisible(true);
        }}>
          <View>
            <Text style={styles.title}>{title}</Text>
          </View>
        </TouchableOpacity> 
        <Modal
          animationType="slide"
          transparent={false}
          visible={this.state.modalVisible}
          onRequestClose={() => {
            Alert.alert('Modal has been closed.');
          }}>
          <View style={{ marginTop: 22 }}>
            <View>
              <Text>Hello World!</Text>

              <TouchableOpacity
                onPress={() => {
                  this.setModalVisible(!this.state.modalVisible);
                }}>
                <Text>Hide Modal</Text>
              </TouchableOpacity>
            </View>
          </View>
        </Modal>
      </Fragment>
   )
};

希望这会有所帮助，

如何修复JSX表达式必须具有一个父元素？

1 个答案: