如何修复 JSX 表达式必须有一个父元素? [英] How to fix JSX expression must have one parent element?

问题描述

我正在尝试在 React Native 中切换模态.平面列表中的每个项目都应该有一个切换选项来打开一个模式.

I am trying to toggle a Modal in react native. Each item in a flatlist should have a toggle option to open a modal.

我收到错误:JSX 表达式必须有一个父元素.

I get the error: JSX expressions must have one parent element.

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

I have tried to google for the right syntax but can't find a solution.

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>
    );
  }
}

我正在尝试为平面列表中的每个项目打开一个独特的模式.

I am trying to get open one unique modal for each item in the flatlist.

推荐答案

您只能返回一个实体.要解决此问题，只需使用 < 在 Item 函数中包围您的返回值.Fragment/> 元素(来自 react 包).

You can only return a single entity. To fix this just surround your return in your Item function with a <Fragment/> element (from the react package).

Fragment 可让您对子项列表进行分组，而无需向 DOM 添加额外节点.

Fragments let you group a list of children without adding extra nodes to the 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 表达式必须有一个父元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！