亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

React-DOM 沒有渲染網頁中的元素

React-DOM 沒有渲染網頁中的元素

開滿天機 2022-10-21 15:40:10
在頭部部分,我添加了需要完成的 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/[email protected]/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 回答

?
尚方寶劍之說

TA貢獻1788條經驗 獲得超4個贊

您的代碼中有幾個拼寫錯誤:

  • React.component應該React.Component

  • ReactDomFactoriesReactDOMFactories(你猜對了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/[email protected]/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>


查看完整回答
反對 回復 2022-10-21
  • 1 回答
  • 0 關注
  • 120 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號