ReactJS报错：Invariant Violation: Target container is not a DOM element 求助

嘿，刚入门React就遇到这个报错太正常啦！我帮你分析下问题出在哪，一步步解决它～

一、先揪出DOM容器的语法错误 #

你代码里写的容器div是 <div id="=f_compo"></div>，这里的id属性多了个多余的=符号！这会导致React用document.getElementById('f_compo')查找元素时完全找不到，自然就报容器不存在的错了。

修正方法：把多余的等号删掉，改成标准的id写法：

<div id="f_compo"></div>

二、确保脚本在DOM加载完成后执行 #

如果你的React脚本放在HTML的<head>标签里，浏览器会优先执行脚本，这时候<body>里的f_compo容器还没被解析出来，React肯定找不到目标元素。

给你三种靠谱的解决方式：

• 方式1：把脚本移到body最底部
  把你的<script type="text/babel">标签放在</body>标签的上方，这样浏览器会先加载完所有DOM元素，再执行React代码，完美避开时机问题。
• 方式2：给脚本加defer属性
  给script标签加上defer属性，让浏览器等DOM加载完成后再执行脚本：

  <script type="text/babel" defer>
    // 你的React组件代码
  </script>
  

• 方式3：用DOMContentLoaded事件包裹渲染逻辑
  把React渲染的代码放在DOM加载完成的回调里，确保万无一失：

  var compo = React.createClass({
    render: function(){
      return (<h3>This is a simple component</h3>);
    }
  });
  
  document.addEventListener('DOMContentLoaded', function() {
    ReactDOM.render(<compo />, document.getElementById('f_compo'));
  });
  

三、额外检查：确认引入了ReactDOM的CDN #

虽然你的报错核心是容器问题，但还是要确保你同时引入了React和ReactDOM的CDN（毕竟渲染组件得靠ReactDOM），比如：

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

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