预期的“}”或相邻的 JSX 元素必须包含在封闭标记中

Question

我对反应完全陌生，正在尝试按照本教程进行操作。 不幸的是，其中有一个错误。 因为我不知道如何使用反应，所以我不知道如何修复它。

我正在尝试按照本教程进行操作 --> 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 "}"

有人可以帮我解决这个错误，这样我就可以继续学习教程了吗？

Answer 1

您缺少内部 object 的右花括号：

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

Answer 2

使您的渲染 function 返回尽可能简单是个好主意，例如：

export default class App extends React.Component {
render() {

   let box = {
      initialBox: {
          body: initialBox, 
          size: [boxSize, boxSize], 
          color: 'red', 
          renderer: Box
      }  // <-- this was missing in your code
   }

   return (
      <GameEngine style={styles.container} entities={box}>
         <StatusBar hidden={true} />
      </GameEngine>
   );
  }
}