React 18クライアントはAPI更新ホットスポット(TS)を提示する

5400 ワード
React typescript テキストリンク

Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17.



REACT実行中にエラーが発生し、ReactDOM.renderはREACT 18では使用されなくなったそうです.

解決する


index.tsxファイルを交換してくれました.
//index.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)
ただし、新しい変更でレンダリングすると、  <StrictMode>を追加すると、構成部品を2回レンダリングできます.
<StrictMode>を抜いて、1回だけ運行しました.
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);

root.render(<App />);
typescriptでimport ReactDOM from 'react-dom/client'を使用するには
端末入力npm i --save-dev @types/react-domにインストールする.

Reference


https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-client-rendering-apis
https://dev.to/osmanforhad/react-js-warning-reactdomrender-is-no-longer-supported-in-react-18-use-createroot-instead-until-you-switch-to-the-new-api-1jhh
https://stackoverflow.com/questions/71668256/deprecation-notice-reactdom-render-is-no-longer-supported-in-react-18
https://velog.io/@ehrbs2021/React-18-react-dom-Type-%EC%9D%B4%EC%8A%88
LeetCode: Pow(x, n)
[leetcode]Find Minimum in Rotated Sorted Array