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>
<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 没有呈现。
开满天机1回答
-
尚方宝剑之说
您的代码中有几个拼写错误：React.component应该React.ComponentReactDomFactories是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>
随时随地看视频慕课网APP
相关分类
JavaScript