相邻的 JSX 元素必须包裹在封闭标签中 (React-Native)

Question

我怎么解决这个问题，因为我不知道怎么解决。我更改了代码的某些部分，更改了 root 并在 root,js 上添加了一些代码，以尽量不让整个应用程序崩溃，但仍然显示此错误。感谢您的帮助。

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

export default class Tabs extends Component {

  state = {
    activeTab: 0
  }

  render({children} = this.props) {
    return (
     <div> 
      <View style={styles.container}>
        <View style={styles.tabsContainer}>
          {children.map(({ props: { title } }, index) => {
            <TouchableOpacity
              style={[
                // Default style for every tab
                styles.tabContainer,
                index === this.state.activeTab ? styles.tabContainerActive : []
              ]}
              // Change active tab
              onPress={() => this.setState({ activeTab: index }) }
              // Required key prop for components generated returned by map iterator
              key={index}
            >
              <Text style={styles.tabText}>
                {title}
              </Text>
            </TouchableOpacity>
        <View style={styles.contentContainer}>
          {children[this.state.activeTab]}
        </View>
      </View>
     </div> 
    );
  }
};

const styles = StyleSheet.create({
  container: {
    flex: 1,                           
  },
  tabsContainer: {
    flexDirection: 'row',               
    paddingTop: 30,                     
  },
  tabContainer: {
    flex: 1,                           
    paddingVertical: 15,              
    borderBottomWidth: 3,             
    borderBottomColor: 'transparent',
  },
  tabContainerActive: {
    borderBottomColor: '#FFFFFF',       
  },
  tabText: {
    color: '#FFFFFF',
    fontWeight: 'bold',
    textAlign: 'center',
  },
  contentContainer: {
    flex: 1                             
  }
});

Answer 1

您缺少选项卡容器的关闭视图标签，您可以删除 div:

render({children} = this.props) {
    return (
      <View style={styles.container}>
        <View style={styles.tabsContainer}>
          {children.map(({ props: { title } }, index) => 
            <TouchableOpacity
              style={[
                // Default style for every tab
                styles.tabContainer,
                index === this.state.activeTab ? styles.tabContainerActive : []
              ]}
              // Change active tab
              onPress={() => this.setState({ activeTab: index }) }
              // Required key prop for components generated returned by map iterator
              key={index}
            >
              <Text style={styles.tabText}>
                {title}
              </Text>
            </TouchableOpacity>
         }
        </View>
        <View style={styles.contentContainer}>
          {children[this.state.activeTab]}
        </View>
      </View>
    );
};

相邻的 JSX 元素必须包裹在封闭标签中 (React-Native)

Adjacent JSX elements must be wrapped in an enclosing tag (React-Native)

react-native

react-jsx

jsx