預期的“}”或相鄰的 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>
   );
  }
}