当我遇到一个奇怪的错误时,我正在使用React和ReactDOM演示一个非常基本的Hello World Uncaught TypeError: inst.render is not a function。在此JSBin中查看。
Uncaught TypeError: inst.render is not a function
我已经使用过React了很多,但是对ES6来说是新手。有什么想法我在这里没看到吗?
错误似乎是在说Hello没有render方法,但是我不确定。
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>
原版的
要将React与ES6一起使用,您需要继承React.Component该类。
React.Component
class Hello extends React.Component { render() { return <h1>Hi</h1> } }
请参阅此处的文档。
更新资料
您也可以使用function,也可以使用arrow。但是,您需要返回组件。
function
arrow
const Hello = () => <h1>Hi</h1>;
注意丢失的花括号。在ES6中,不带花括号的箭头函数返回其主体表达的结果。