Question

不确定为什么要在那里要求支撑。据我所知，所有括号都匹配。是否因为某个地方的结束标签错误？我是本机反应的新手，所以我很难理解一些所需的基本格式。

import React, { Component, Header } from 'react';
import { StyleSheet, View} from 'react-native';
import { Button } from 'react-native-elements';

export default class App extends Component {

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

        <Button style={styles.leagueButton} title='League Of Legends' />
        <Button style={styles.contain} title='CSGO'  />
        <Button style={styles.overwatchButton} title='Overwatch' />
        <Button style={styles.dota2Button} title='Overwatch' />
        <Button style={styles.fortniteButton} title='Fortnite' />
      <View/>

      <Header>
          centerComponent={{ text: 'Games', style: { color: '#fff'  } }}

        <Header/>
    )
  }
}

const styles = StyleSheet.create({

  leagueButton: {
    top: 50
  },
  contain: {
    top: 70
  },
  overwatchButton: {
    top: 90
  },
  dota2Button: {
    top: 110
  },
  fortniteButton:{
    top: 130
  }

})

更新：现在添加另一个标头标记后，我收到JSX关闭标记错误

再次更新：呈现错误图片

Answer 1

 <Header>
          centerComponent={{ text: 'Games', style: { color: '#fff'  } }}

        <Header/>

问题是否关闭了Header标签，我猜centerComponent是它的道具？

更新：

return (
      <View 
      style={styles.contain}>

        <Button style={styles.leagueButton} title='League Of Legends' />
        <Button style={styles.contain} title='CSGO'  />
        <Button style={styles.overwatchButton} title='Overwatch' />
        <Button style={styles.dota2Button} title='Overwatch' />
        <Button style={styles.fortniteButton} title='Fortnite' />
      <View/>

      <Header>
          centerComponent={{ text: 'Games', style: { color: '#fff'  } }}

        <Header/>
    )

只能返回一个级别的标签，但是您将同时返回View和Header。因此，您应该将两者都包装到另一个View

中

return (
     <View>
      <View style={styles.contain}>
        <Button style={styles.leagueButton} title='League Of Legends' />
        <Button style={styles.contain} title='CSGO'  />
        <Button style={styles.overwatchButton} title='Overwatch' />
        <Button style={styles.dota2Button} title='Overwatch' />
        <Button style={styles.fortniteButton} title='Fortnite' />
      </View>

      <Header 
        centerComponent={{ text: 'Games', style: { color: '#fff'  } }}
      />
    </View>)

Answer 2

您还可以将<Header>和<View>用一个<React.Fragment> </React.Fragment>包装。那应该解决您的错误。

将其放在您的头部并查看，而不是其他<View> </View>或''等。

它基本上将您的内容包装在一起，以便您仅返回一个父div（以满足jsx要求），而无需使用实际div或更高阶的组件包装子组件。

reactfragment标签将在DOM处消失，但仍允许您将相同级别的标签包装在一个父对象下。在最新版本的react中，您还可以使用较短的新语法：

<> 
 // Your other components / tags
</>
`.

意外的令牌，预期的}即使所有大括号都有匹配的对

2 个答案: