React 元素不渲染
React element does not render
我一直在尝试使用 React 渲染一个简单的元素。出于某种原因,非常相似的示例确实有效,但我的代码无法正常工作。我看不出任何错误,你能告诉我吗?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React</title>
<script src="https://fb.me/react-0.14.6.js"></script>
<script src="https://fb.me/react-dom-0.14.6.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var ExampleElement = React.createClass({
render : function() { return (<p>P</p>); };
});
React.render(<ExampleElement/>, document.getElementById('example'));
</script>
</body>
</html>
使用 ReactDOM.render
而不是 React.render
。
在 React 0.14 中,render
函数已从 react
包移至 react-dom
,并且您在渲染函数后还有一个分号,这会给您带来问题,因为React.createClass
拿一个对象。
删除
之后的 ;
render : function() { return (<p>P</p>); };
^^
也可以使用 ReactDOM.render
而不是 React.render
我一直在尝试使用 React 渲染一个简单的元素。出于某种原因,非常相似的示例确实有效,但我的代码无法正常工作。我看不出任何错误,你能告诉我吗?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React</title>
<script src="https://fb.me/react-0.14.6.js"></script>
<script src="https://fb.me/react-dom-0.14.6.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var ExampleElement = React.createClass({
render : function() { return (<p>P</p>); };
});
React.render(<ExampleElement/>, document.getElementById('example'));
</script>
</body>
</html>
使用 ReactDOM.render
而不是 React.render
。
在 React 0.14 中,render
函数已从 react
包移至 react-dom
,并且您在渲染函数后还有一个分号,这会给您带来问题,因为React.createClass
拿一个对象。
删除
之后的;
render : function() { return (<p>P</p>); };
^^
也可以使用 ReactDOM.render
React.render