当我用 React 和 ReactDOM 展示一个非常基本的 Hello World 时，我遇到了一个奇怪的错误Uncaught TypeError: inst.render is not a function。在此查看JSBin https://jsbin.com/milupu/7/edit?html,js,output.
我经常使用 React，但对 ES6 还很陌生。有什么我在这里没有看到的想法吗？
该错误似乎是在说Hello没有render方法，但我不确定。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script src="
https://cdnjs.cloudflare.com/ajax/libs/redux/3.0.4/redux.js" type="text/javascript"></script>
<script src="https://fb.me/react-0.14.0.js"></script>
<script src="https://fb.me/react-dom-0.14.0.js"></script>
</head>
<body>
<div id="root"></div>
<script>
const Hello = () => {
<h1>Hi</h1>
};
const foo = () => {
ReactDOM.render(
<Hello />,
document.getElementById('root')
);
}
foo();
</script>
</body>
</html>
Original
要将React与ES6一起使用，您需要继承React.Component class.
class Hello extends React.Component {
render() {
return <h1>Hi</h1>
}
}
See here https://facebook.github.io/react/docs/reusable-components.html#es6-classes在其文档中。
Update
您还可以使用function, or arrow在你的情况下。但是您需要返回该组件。
const Hello = () => <h1>Hi</h1>;
请注意缺少的花括号。在 ES6 中，一个箭头函数 https://notetops.wordpress.com/2015/12/07/es6-arrows-and-lexical-this/不带花括号则返回其主体表达式的结果。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
