Reactdomレンダリングはもはや反応18でサポートされていません

7941 ワード
テキストリンク
それで、私は2008年の開始以来、私の最初の反応アプリケーションをブートしましたReact 18 (発売6日後).
私がコンソールをチェックしたとき、私は見つけることを期待していなかったというエラーを見ていた.

エラーが発生する理由は？


上記のエラーはReact.render() の代わりにReact.createRoot 反応のv 18では、アプリケーションのルートをレンダリングします-インデックスのルートのIDで常にdivです.インデックス.TSXファイル型を使用するアプリケーションをブートストラップするかどうかによって異なります.

ハウツーフィックス.


以下のコードをあなたの中に書いてくださいindex.tsx or index.js ファイル
  • 反応DOM/クライアントサブモジュールからのインポートreactdom
    • Import ReactDOM from 'react-dom/client'
  • あなたの構造を変えるindex.js or index.tsx ファイル.しかし、これはあなたのタイプスクリプトを使用するかどうかに依存します.
  • タイプスクリプトの使用
    • import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import reportWebVitals from './reportWebVitals'

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
root.render(
 <React.StrictMode>
  <App />
 </React.StrictMode>
)

reportWebVitals()
    密接に見てください、そして、あなたはどこかでcreaterootを見ます.見た?😏 次回注意してください.
    反応チームは、支持するためにcreateootに変わります
    反応アプリで•同時モード.

    Concurrent Mode is a set of new features that help React apps stay responsive and gracefully adjust to the user’s device capabilities and network speed.


    詳しく見るconcurrent mode
  • プレーンJavaScriptの使用
    • import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import reportWebVitals from './reportWebVitals'

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
 <React.StrictMode>
  <App />
 </React.StrictMode>
)

reportWebVitals()

    追加情報.

  • 反応18における反応ルータの使用
    これはあなたの方法を設定する方法ですindex.js or index.tsx ファイルを新しいファイルを使用している場合.
    • import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'
import App from './App'
import reportWebVitals from './reportWebVitals'
import { BrowserRouter } from 'react-router-dom'

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
root.render(
 <React.StrictMode>
  <BrowserRouter>
   <App />
  </BrowserRouter>
 </React.StrictMode>
)

reportWebVitals()
    私は私ができる方法であなたを助けてほしい.
    チアーズ.
    PS:これは私が今まで書いた最初の記事です.成長する🎉
    Jetpackは、ナビゲーションを作成し、引数を送信します.
    TIL 12,React:基本概念/CRA*