ReactJS提供inst.render不是函数错误

小编典典

ReactJS提供inst.render不是函数错误

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>

阅读 260

2020-07-22

共1个答案

小编典典

原版的

要将React与ES6一起使用，您需要继承React.Component该类。

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

请参阅此处的文档。

更新资料

您也可以使用function，也可以使用arrow。但是，您需要返回组件。

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

注意丢失的花括号。在ES6中，不带花括号的箭头函数返回其主体表达的结果。

2020-07-22