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

IT技术 reactjs
2021-05-12 17:32:13

当我遇到一个奇怪的错误时，我正在使用 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>
4个回答

原来的

要在 ES6 中使用 React，您需要继承React.Component该类。

class Hello extends React.Component {
  render() {
    return <h1>Hi</h1>
  }
}

请参阅此处的文档。

更新

您也可以使用function, 或arrow在您的情况下。但是，您需要返回组件。

const Hello = () => <h1>Hi</h1>;

注意缺少的花括号。在 ES6 中，没有花括号的箭头函数返回其主体表达式的结果。

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

当我渲染的组件是undefined. 我以前从未见过这个错误。我的应用程序也在使用 redux。

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

所以修复很简单：

import Book from './Book'

如果您遇到此问题，我的建议是检查容器组件的渲染方法，看看是否有任何您尝试渲染的组件尚未定义。

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

Uncaught (in promise) ReferenceError: Book is not defined

我收到此错误是因为我不小心调用return someObj了组件的constructor. 一旦我删除它，问题就解决了。

其它你可能感兴趣的问题
上一篇在 create-react-app 中，添加 Bootstrap 4？ 下一篇mapDispatchToProps：有任何意义吗？