javascript - 如何修复错误:相邻的 JSX 元素必须包含在封闭标记中?在本机反应
问题描述
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)```
解决方案
将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! -->
推荐阅读
- firebase - 如何为任何文档更新添加firebase触发器?
- r - 基于相同组行的新列
- haskell - 带有 RValue LValue 问题的无标签最终 DSL
- javascript - 如何使用 javascript 选择/隐藏类型为“text/html”的对象内的元素
- reactjs - 错误 renderIntoDocument 不是 react-testing-library 的函数
- php - 错误:该属性……也没有任何一种方法……不存在并且具有公共访问权限
- windows - 如何在本地运行 Meteor.js 但在 Windows 中将 mongo 连接到 mongodb.com
- php - 如何获取 URL 参数的第一个单词
- laravel - 购物车不显示物品 laravel
- unity3d - Hololense 2 开发 Unity Buildtime 错误?