ReactJS 教程井字游戏答案

【问题标题】：ReactJS Tutorial Tic Tac ToeReactJS 教程井字游戏
【发布时间】：2018-10-08 22:28:06
【问题描述】：

使用 reactJS 教程时出现解析错误。

./src/index.js 第 12 行：解析错误：相邻的 JSX 元素必须包含在封闭标记中。你想要一个 JSX 片段 ...？

  white-space: pre-wrap;"></div><div id="root"></div>
                                ^

这是在 reactjs.org 上共享的代码。但它对我不起作用。

【问题讨论】：

将其包裹在另一个标签中。 <>{{the code that you are using here}}</>
即使没有'code' /src/index.js 第15行：解析错误：意外的令牌，预期的“}” 13 | 14 | window.addEventListener('mousedown', function(e) { > 15 | document.body.classList.add('mouse-navigation'); | ^
这是您的 java 脚本中的另一个错误。前一个是 reactDOM 问题，该问题已解决并出现其他错误。你能把脚本部分完整地贴出来吗？

【解决方案1】：

这个错误意味着你不能在 JSX 中拥有类似的东西：

<div>a</div>
<div>b</div>

一定要像这样包裹，注意Fragment可以是任何可以接受子组件的组件，Fragment是用来包裹东西的，通常不需要div但必须符合JSX语法，需要导入它来自 React：

<Fragment>
  <div>a</div>
  <div>b</div>
</Fragment>

之后，如果您遇到与此无关的其他错误，那么它们可能不相关。

【讨论】：

【解决方案2】：

获取所有的 html 元素并将它们包装在一对 div 之间

<div>
   <...>
   </...>
</div>

【讨论】：