给出inst.render的ReactJS不是函数错误

Don*_*n P 16 reactjs

当我遇到一个奇怪的错误时,我正在使用React和ReactDOM显示一个非常基本的Hello World Uncaught TypeError: inst.render is not a function.在这个JSBin中看到它.

我经常使用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>
Run Code Online (Sandbox Code Playgroud)

PSW*_*Wai 15

更新

您也可以使用React.Component,或者function在您的情况下使用.但是,您需要返回组件.

class Hello extends React.Component {
  render() {
    return <h1>Hi</h1>
  }
}
Run Code Online (Sandbox Code Playgroud)

注意缺少花括号.在ES6中,没有花括号的箭头函数返回其正文表达式的结果.

原版的

要将React与ES6一起使用,您需要继承arrow该类.

const Hello = () => <h1>Hi</h1>;
Run Code Online (Sandbox Code Playgroud)

请参阅此处的文档.

  • 啊,如果您使用普通函数,则需要返回元素。(见编辑) (2认同)

Ish*_*Ish 9

TypeError: instance.render is not a function当您render()的 React 组件中没有函数时,就会出现错误。


svn*_*vnm 6

当我渲染的组件出现时,我遇到了这个错误undefined.我以前从未见过这个错误.我的应用程序也使用redux.

在我的情况下,它只是方法中未定义的<Book />组件render().

所以修复很简单:

import Book from './Book'
Run Code Online (Sandbox Code Playgroud)

如果遇到这个问题,我的建议是检查容器组件的render方法,看看是否有任何你想要渲染的组件尚未定义.

这对我来说似乎很奇怪,它应该给出以下错误:

未捕获(在承诺中)ReferenceError:未定义Book