个人中心
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在其文档中。

更新

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

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

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

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

24 4 0
文章推荐： reactjs - Jest 无法找到模块 FileName.css(映射为identity-obj-proxy)
文章推荐： javascript - 如何访问 Ramda 中的构造函数 'this'？
文章推荐： powershell - 关于 $profile.psextended 的问题
文章推荐： reactjs - 摩卡、 enzyme : Unit testing custom functions in react component using enzyme
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com