如何解决错误：相邻的JSX元素必须包装在一个封闭的标记中？在本机反应中

Question

1。我想要的视图是在flexDirection中排列两个按钮：“行”，flexDirection中的三个按钮：“ column”，请指定要在哪里进行更改或在可能的情况下进行后修改链接到BoxContainer.js：'https://dzone.com/articles/custom-container-component-in-react-native-with-di'。>2.我尝试使用<>

        import React, { Component } from "react";
        import { Platform, StyleSheet, Text, View, Button } from "react-native";


 import BoxContainer from './components/BoxContainer.js'
export default class App extends Component {
  //Binding the function with class
  buttonClickListener = () => {
    alert("Clicked On Button !!!");
  };

  render() {
    return (
      <View style={styles.page}>

        <Text style={styles.headerText}></Text>
        <BoxContainer style={styles.container1}>
           <View style={{flexDirection:'row'}}> 
           <View style={[{ width: "30", height :100, margin: 0,padding:'10', backgroundColor: "green" }]}>
          <Button
            onPress={this.buttonClickListener}
            title="BUTTON1"
            color="#00B0FF"
            />
          </View>
           <View style={[{ width: "70%", height :100, margin: 0, backgroundColor: "red" }]}>
          <Button
            onPress={this.buttonClickListener}
            title="BUTTON2"
            color="#00B0FF"
            />

          </View></View></BoxContainer>
          </View>








 41 |   <BoxContainer style={styles.container2}>
        ^error is here
           <View style={{flexDirection:'row'}}>
        <View style={[{ width: "90%", height :100, margin: 0, backgroundColor: "red" }]}>
          <Button
            onPress={this.buttonClickListener}
            title="Button One"
            color="#00B0FF"
          /> 

        </View>

        <View style={[{ width: "90%",height :80, margin: 1, backgroundColor: "red" }]}>
          <Button
            onPress={this.buttonClickListener}
            title="Button Two"
            color="#EC407A"
          />
        </View>

        <View style={[{ width: "90%",height :60, margin: 1, backgroundColor: "red" }]}>
          <Button
            onPress={this.buttonClickListener}
            title="Button Three"
            color="#1DE9B6"
          />
        </View></View></BoxContainer></View>



    );
  }
}

const styles = StyleSheet.create({
  page:{flex:1},
  container1: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF"
  },
  container2: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF"
  },
  headerText: {
    fontSize: 20,
    textAlign: "center",
    margin: 10,
    fontWeight: "bold"
  },

});

//error message:
ESLint: (41:5) Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?

  39 |           
  40 |          
> 41 |     <BoxContainer style={styles.container2}>
     |     ^
            `i've tried <></> it dosent work `
  42 |            <View style={{flexDirection:'row'}}>
  43 |         <View style={[{ width: "90%", height :100, margin: 0, backgroundColor: "red" }]}>
  44 |           <Button (null)```

Answer 1

您的第一个View标签未关闭