Question

当我遇到一个奇怪的错误Uncaught TypeError: inst.render is not a function时，我正在使用React和ReactDOM显示一个非常基本的Hello World。请参阅此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>

Answer 1

<强>更新

您也可以在案例中使用arrow或const Hello = () => <h1>Hi</h1>;。但是，您需要返回组件。

React.Component

注意缺少花括号。在ES6中，没有花括号的arrow function返回其正文表达式的结果。

<强>原始

要将React与ES6一起使用，您需要继承class Hello extends React.Component { render() { return <h1>Hi</h1> } }类。

{{1}}

请参阅其文档中的here。

Answer 2

当我渲染的组件是undefined时，我遇到了这个错误。我以前从未见过这个错误。我的应用也使用了redux。

在我的情况下，<Book />方法中的render()组件尚未定义。

所以修复很简单：

import Book from './Book'

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

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

未捕获（在承诺中）ReferenceError：未定义图书

Answer 3

我收到此错误是因为我在组件的return someObj中无意中调用了constructor。一旦我删除它，问题就解决了。

Answer 4

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

render()错误。

Answer 5

另一种解决方案是使用implicit return。只需将Hello组件的返回值括在括号中而不是括号中，就像这样（JSBin）

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

Answer 6

我在webstorm / lint的推荐下将静态关键字添加到App组件时出现此错误。尝试删除所有静态关键字。 static App extends Component {...

Answer 7

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

与

不同

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

Answer 8

请记住，您创建的每个react组件都将返回某些内容。如果它是一个类，请确保您的类中具有render函数。

Answer 9

在我的情况下，这是因为我没有在组件中包含render函数（即使我不需要渲染任何元素）-返回null似乎也可以工作：

# doesn't work
class BarChart extends Component {

}

# works
class BarChart extends Component {

    render() {
        return null;
    }
}

Answer 10

任何类组件都必须有包含每个返回内容的 render() 方法来解决这个问题。

<块引用>

渲染 = ()=> { 返回（内容)}

Answer 11

由于拼写错误，我收到了这个错误。我把它写成 rendor() 而不是 render()。

Answer 12

遇到了类似的问题。 Render 内部的返回不正确。一旦直接使用 ReactDOM.render 测试了文件并进行了一些更改，问题就得到了解决。

Answer 13

我的问题是孩子导入的类；它的拼写错误是 return() 而不是 render() -- 存在多个 return()，只是将最外面的一个更改为 render()。

线索是当子元素被移除时一切都呈现得很好。

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

13 个答案: