React render - 费解的 Uncaught Error

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

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 聊聊，或者关注我的个人公众号“大象工具”，查看更多联系方式

React render - 费解的 Uncaught Error

关于作者 🌱

相关推荐