Javascript React DOM未呈现网页中的元素_Javascript_Html_Reactjs_Dom_React Dom

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

javascript html reactjs dom

Javascript React DOM未呈现网页中的元素,javascript,html,reactjs,dom,react-dom,Javascript,Html,Reactjs,Dom,React Dom,在标题部分，我添加了需要完成的CDN链接 <head> <meta charset="UTF-8"> <title>First Component</title> <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <scri

在标题部分，我添加了需要完成的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>


第一部分

在正文部分，我提到了我在其中编写react代码的元素，请检查主体中的元素工作正常，但“反应”组件未渲染

<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>


你好
类Pet.component{
渲染（）{
常数h2=reactdomfactures.h2（null，“波特”）；
常量img=reactdomfactures.img（{src:：https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Indian_spitz_adult.JPG/640px-Indian_spitz_adult.JPG",
alt:“波特我的狗”}）；
返回reactDomFactorys.div（null，h2，img）；
}
}
render（React.createElement（Pet）、document.getElementById（“app”）；

在上面的代码中，元素显示良好，但react dom未呈现。

您的代码中有几个输入错误：

<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.component
```
应为
```
React.component
```
```
reactdomfactures
```
是
```
reactdomfactures
```
（您在
```
h2
```
：）中找到了它）
```
ReactDom.render
```
实际上是
```
ReactDom.render
```


第一部分
你好
类扩展了React.Component{
渲染（）{
常数h2=reactdomfactures.h2（null，“波特”）；
常量img=reactdomfactures.img（{src:：https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Indian_spitz_adult.JPG/640px-Indian_spitz_adult.JPG",
alt:“波特我的狗”}）；
返回reactDomFactorys.div（null，h2，img）；
}
}
render（React.createElement（Pet）、document.getElementById（“app”）；