首页 > 解决方案 > 预期的“}”或相邻的 JSX 元素必须包含在封闭标记中

问题描述

我对反应完全陌生,并正在尝试遵循本教程。不幸的是,其中有一个错误。因为我不知道如何使用react,所以我不知道如何修复它。

我正在尝试遵循本教程-> https://medium.com/@williamyang93/my-journey-with-react-native-game-engine-part-i-starting-the-project-bbebcd2ccf6

我认为这部分代码有错误:

export default class App extends React.Component {
render() {
   return (
    <GameEngine
    style={styles.container}
    entities={{ initialBox: { 
               body: initialBox, 
               size: [boxSize, boxSize], 
               color: 'red', 
               renderer: Box
         }}>
    <StatusBar hidden={true} />
    </GameEngine>
        );
  }

}

当我尝试使用它运行我的 app.js 时,出现此错误:Adjacent JSX elements must be wrapped in an enclosing tag.

我的第一个想法是删除{第 6 行的额外内容,因此:

export default class App extends React.Component {
    render() {
       return (
        <GameEngine
        style={styles.container}
        entities={ initialBox: { 
                   body: initialBox, 
                   size: [boxSize, boxSize], 
                   color: 'red', 
                   renderer: Box
             }}>
        <StatusBar hidden={true} />
        </GameEngine>
            );
      }
}

但后来我得到:Expected "}"

有人可以帮我解决这个错误,这样我就可以继续教程了吗?

标签: javascriptreactjsreact-native

解决方案


您缺少内部对象的右花括号:

<GameEngine
    style={styles.container}
    entities={{ 
        initialBox: { 
            body: initialBox, 
            size: [boxSize, boxSize], 
            color: 'red', 
            renderer: Box,
        } // this is missing
    }}
>
    <StatusBar hidden={true} />
</GameEngine>

推荐阅读