gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 13:11:44 24 4
gpt4 key购买 nike

当我使用 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>

最佳答案

原创

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

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

参见here在其文档中。

更新

您还可以根据您的情况使用functionarrow。但是您需要返回组件。

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

注意缺少的花括号。在 ES6 中,arrow function不带花括号返回其主体表达式的结果。

关于ReactJS 给出 inst.render 不是函数错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34196988/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com