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

debugcn 发表于 Dev

用户名

1.我想要的视图是在flexDirection：'row'中安排两个按钮，在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)```

塔玛斯·佐克（Tamas Szoke）

将render函数内部的所有内容放入一个标签，例如div：

render() {
  return (
    <div>
      // your code
    </div>
  )
}

或重构代码以删除相邻的标签：

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> Remove this! -->

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。