在创建一个简单的React示例页面后,我得到了这个错误:
未捕获错误:不变冲突:_registerComponent(...):目标容器不是DOM元素。
下面是我的代码:
/** @jsx React.DOM */
'use strict';
var React = require('react');
var App = React.createClass({
render() {
return <h1>Yo</h1>;
}
});
React.renderComponent(<App />, document.body);
HTML:
<html>
<head>
<script src="/bundle.js"></script>
</head>
<body>
</body>
</html>
这是什么意思?
发布于 2014-10-26 03:24:15
在执行脚本时,document
元素还不可用,因为script
本身在head
中。虽然将script
保留在head
和render on DOMContentLoaded
event中是一个有效的解决方案,但更好的做法是将您的放在的最底部,并将<>e118呈现根组件放在之前,如下所示:
<html>
<head>
</head>
<body>
<div id="root"></div>
<script src="/bundle.js"></script>
</body>
</html>
在bundle.js
中,调用:
React.render(<App />, document.getElementById('root'));
你应该总是渲染到一个嵌套的 DOM 而不是DOM节点,否则,各种第三方代码(Google Font Loader,浏览器插件,等等)可能会在React没有预料到的时候修改body
DOM节点,并导致很难跟踪和调试的奇怪错误。Read more about this issue.
将script
放在底部的好处是,在脚本加载之前,它不会阻止渲染,以防您将React服务器渲染添加到项目中。
更新时间:( 2015 -10- 07 | v0.14)
React.render
已弃用,请改用ReactDOM.render
。
示例:
import ReactDOM from 'react-dom';
ReactDOM.render(<App />, document.getElementById('root'));
发布于 2015-03-10 21:33:16
/index.html
<!doctype html>
<html>
<head>
<title>My Application</title>
<!-- load application bundle asynchronously -->
<script async src="/app.js"></script>
<style type="text/css">
/* pre-rendered critical path CSS (see isomorphic-style-loader) */
</style>
</head>
<body>
<div id="app">
<!-- pre-rendered markup of your JavaScript app (see isomorphic apps) -->
</div>
</body>
</html>
/app.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
function run() {
ReactDOM.render(<App />, document.getElementById('app'));
}
const loadedStates = ['complete', 'loaded', 'interactive'];
if (loadedStates.includes(document.readyState) && document.body) {
run();
} else {
window.addEventListener('DOMContentLoaded', run, false);
}
(IE9+)
备注:在标题中包含<script async src="..."></script>
可以确保浏览器在加载JavaScript内容之前就开始下载HTML。
发布于 2014-12-30 01:14:03
ready function可以像这样使用:
$(document).ready(function () {
React.render(<App />, document.body);
});
如果您不想使用jQuery,可以使用onload
函数:
<body onload="initReact()">...</body>
https://stackoverflow.com/questions/26566317
复制相似问题