React render - 费解的 Uncaught Error

更新日期: 2015-12-12 阅读次数: 21065 分类: Javascript

非常简单的一段测试代码,但是一直报错

Uncaught Error: Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.

HTML 代码

<head>
  <meta charset="utf-8">
  <title>Index Page</title>
  <script src="react-0.12.2.min.js"></script>
  <script src="build/core.js"></script>
</head>

<body>
  <div id="content"></div>
</body>

React 代码

var MySelect = React.createClass({
  getInitialState: function() {
    return {selected: 'B'};
  },

  render: function() {
    return (
      <div>
	<select ref="select" value={this.state.selected}>
          <option value="A">zhongwei</option>
          <option value="B">haha</option>
          <option value="C">test</option>
        </select>
      </div>
    );
  }
});

React.render(
  <MySelect />,
  document.getElementById('content')
);

报错一直提示 React.render 那行有问题, 但是又没有更具体的错误信息。

安装了 React Developer Tools 0.13.0 Chrome 插件,也没有头绪,因为根本没有提示信息。。。

后来发现是 js 文件的加载顺序有问题, 调整成下面这样就没问题了

<head>
  <meta charset="utf-8">
  <title>Index Page</title>
</head>

<body>
  <div id="content"></div>
  <script src="react-0.12.2.min.js"></script>
  <script src="build/core.js"></script>
</body>

看来是目标 div 还没有渲染完就调用了 React.render

领取阿里云/腾讯云服务器优惠券

关于作者

我是来自山东烟台的一名开发者,喜欢瞎折腾,顺便记记笔记。有敢兴趣的话题,欢迎加微信 zhongwei 聊聊。 白天写程序,晚上哄熊孩子,可能回复有点慢,见谅。 查看更多联系方式

相关文章

谈笑风生

宿舍

方法

爱评论不评论

近期节日

2020年04月07日 世界卫生日
2020年04月11日 世界帕金森病日
2020年04月19日 谷雨
2020年04月21日 复活节
2020年04月22日 世界地球日
2020年04月23日 世界读书日
2020年04月26日 知识产权日
2020年04月30日 佛诞
2020年04月30日 全国交通安全反思日
2020年05月01日 国际劳动节
2020年05月04日 五四青年节
2020年05月05日 立夏
查看更多节日