Как исправить ошибку: смежные элементы JSX должны быть заключены в закрывающий тег? в ответ родной - PullRequest
Новая
       144

Как исправить ошибку: смежные элементы JSX должны быть заключены в закрывающий тег? в ответ родной

1 голос
/ 09 мая 2020

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)```

1 Ответ

0 голосов
/ 09 мая 2020

Поместите все внутри вашей функции 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! -->
...