React-DOM 未呈现网页中的元素

Question

在head部分我添加了需要完成的CDN链接。

<head>
    <meta charset="UTF-8">
    <title>First Component</title>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom-factories@1.0.0/index.js"></script>
</head>

在正文部分我提到了我在其中编写了反应代码的元素，请检查正文中的元素工作正常，但反应组件未呈现。

<body>
    <div id="app"></div>
    <h1>Hello</h1>
    <script type="text/javascript">
      class Pet extends React.component{
        render (){
            const h2 = ReactDOMFactories.h2(null, "Potter");
            const img = ReactDomFactories.img({src:"https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Indian_spitz_adult.JPG/640px-Indian_spitz_adult.JPG",
            alt:"Potter my dog"});
            return ReactDomFactories.div(null, h2,img);
        }
      }
     ReactDom.render(React.createElement(Pet),document.getElementById("app"));
    </script> 
</body>

在上面的代码中，元素显示正常，但 react-dom 未呈现。

Answer 1

您的代码中有几个拼写错误：

React.component 应该是 React.Component
ReactDomFactories 是 ReactDOMFactories（你在 h2 中做对了 :)）
ReactDom.render实际上是ReactDOM.render

<head>
  <meta charset="UTF-8">
  <title>First Component</title>
  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom-factories@1.0.0/index.js"></script>
</head>

<body>
  <div id="app"></div>
  <h1>Hello</h1>
  <script type="text/javascript">
    class Pet extends React.Component{
      render (){
          const h2 = ReactDOMFactories.h2(null, "Potter");
          const img = ReactDOMFactories.img({src:"https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Indian_spitz_adult.JPG/640px-Indian_spitz_adult.JPG",
          alt:"Potter my dog"});
          return ReactDOMFactories.div(null, h2,img);
      }
    }
   ReactDOM.render(React.createElement(Pet),document.getElementById("app"));
  </script> 
</body>

React-DOM 未呈现网页中的元素

React-DOM is not rendering the elements in the webpage

html

javascript

dom

reactjs

react-dom