不使用Webpack的React项目中Babel报Unexpected token语法错误排查求助

嘿，我一眼就发现问题所在了！你的Inline Babel脚本里有个明显的语法错误，导致Babel没法正确解析这段JSX代码。

错误原因分析 #

看报错指向的那行代码：

setTimeout(() => ReactDOM.render( <App dangerouslySetInnerHTML={ { __html : "<div>HTML</div>" } />, document.getElementById("manual-content")), 0)

这里有两个关键语法问题：

1. dangerouslySetInnerHTML的表达式闭合不全：dangerouslySetInnerHTML需要接收一个包含__html键的对象，在JSX里要用双层大括号包裹（外层大括号表示嵌入JS表达式，内层大括号是对象本身），你这里少写了一个闭合的}。
2. JSX标签未正确闭合：<App>作为自闭合标签，应该以/>结尾，但你把标签闭合的>写到了逗号后面，导致语法结构完全混乱，Babel解析到这里就遇到了意外的逗号，触发了语法错误。

修正后的代码 #

把代码改成下面这样就能正常运行了：

setTimeout(() => ReactDOM.render(
  <App dangerouslySetInnerHTML={{ __html : "<div>HTML</div>" }} />, 
  document.getElementById("manual-content")
), 0)

额外注意点 #

• 写JSX自闭合标签时，一定要确保/>的位置正确，不要和后面的参数逗号混淆
• 使用dangerouslySetInnerHTML时要格外小心，确保传入的HTML是安全可信的，避免XSS攻击
• 如果你的页面DOM结构加载有延迟，也可以考虑把渲染逻辑放在DOMContentLoaded事件回调里，替代setTimeout，这样更稳妥：

  document.addEventListener('DOMContentLoaded', () => {
    ReactDOM.render(
      <App dangerouslySetInnerHTML={{ __html : "<div>HTML</div>" }} />, 
      document.getElementById("manual-content")
    );
  });
  

内容的提问来源于stack exchange，提问作者Ascolon