{"componentChunkName":"component---src-templates-post-template-js","path":"/zh-CN/ecosystem/react19","result":{"data":{"current":{"frontmatter":{"title":"React 19 适配","order":3,"brief":"React 19 适配指南","icon":"doc-configprovider"},"fields":{"type":"ecosystem"},"tableOfContents":{"items":[{"url":"#react-19-的特殊之处","title":"React 19 的特殊之处","items":[{"url":"#1-reactdomrender-被移除","title":"1. ReactDOM.render 被移除"},{"url":"#2-reactdomfinddomnode-被移除","title":"2. ReactDOM.findDOMNode 被移除"},{"url":"#为什么需要-adapter","title":"为什么需要 adapter？"}]},{"url":"#快速开始","title":"快速开始","items":[{"url":"#安装","title":"安装"},{"url":"#react-19-用户重要","title":"React 19 用户（重要）"},{"url":"#react-161718-用户","title":"React 16/17/18 用户"}]},{"url":"#注意事项","title":"注意事项","items":[{"url":"#tooltip-与类组件的限制","title":"Tooltip 与类组件的限制"},{"url":"#错误提示","title":"错误提示"}]},{"url":"#常见问题","title":"常见问题"},{"url":"#技术细节","title":"技术细节","items":[{"url":"#版本兼容性矩阵","title":"版本兼容性矩阵"},{"url":"#adapter-的工作原理","title":"adapter 的工作原理"}]}]},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"localeCode\": \"zh-CN\",\n  \"order\": 3,\n  \"category\": \"生态与帮助\",\n  \"title\": \"React 19 适配\",\n  \"icon\": \"doc-configprovider\",\n  \"dir\": \"column\",\n  \"brief\": \"React 19 适配指南\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"Semi Design \\u73B0\\u5DF2\\u652F\\u6301 React 19\\u3002\\u7531\\u4E8E React 19 \\u5F15\\u5165\\u4E86\\u4E00\\u4E9B\\u5E95\\u5C42 API \\u7684\\u53D8\\u66F4\\uFF0C\\u4F7F\\u7528\\u65F6\\u9700\\u8981\\u8FDB\\u884C\\u7B80\\u5355\\u7684\\u9002\\u914D\\u3002\"), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"React 19 \\u7684\\u7279\\u6B8A\\u4E4B\\u5904\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"React 19 \\u79FB\\u9664\\u4E86\\u4E24\\u4E2A Semi \\u7EC4\\u4EF6\\u5E93\\u4F9D\\u8D56\\u7684 API\\uFF1A\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"1. \", mdx(\"inlineCode\", {\n    parentName: \"h3\"\n  }, \"ReactDOM.render\"), \" \\u88AB\\u79FB\\u9664\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"React 19 \\u79FB\\u9664\\u4E86\\u4F20\\u7EDF\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"ReactDOM.render\"), \" API\\uFF0C\\u6539\\u4E3A\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"createRoot\"), \"\\u3002Semi \\u7684\\u4EE5\\u4E0B\\u7EC4\\u4EF6\\u4F9D\\u8D56\\u6B64 API \\u6765\\u52A8\\u6001\\u6302\\u8F7D\\u5185\\u5BB9\\uFF1A\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Modal.info()\"), \" / \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Modal.success()\"), \" / \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Modal.error()\"), \" / \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Modal.warning()\"), \" / \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Modal.confirm()\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Toast.info()\"), \" / \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Toast.success()\"), \" / \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Toast.error()\"), \" / \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Toast.warning()\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Notification.info()\"), \" / \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Notification.success()\"), \" / \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Notification.error()\"), \" / \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Notification.warning()\"))), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"2. \", mdx(\"inlineCode\", {\n    parentName: \"h3\"\n  }, \"ReactDOM.findDOMNode\"), \" \\u88AB\\u79FB\\u9664\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"React 19 \\u79FB\\u9664\\u4E86 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"ReactDOM.findDOMNode\"), \" API\\uFF0C\\u8BE5 API \\u7528\\u4E8E\\u4ECE\\u7C7B\\u7EC4\\u4EF6\\u5B9E\\u4F8B\\u83B7\\u53D6\\u5BF9\\u5E94\\u7684 DOM \\u8282\\u70B9\\u3002Semi \\u7684\\u4EE5\\u4E0B\\u7EC4\\u4EF6\\u53D7\\u5F71\\u54CD\\uFF1A\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Tooltip\"), \" \\u53CA\\u6240\\u6709\\u57FA\\u4E8E\\u5B83\\u7684\\u5F39\\u51FA\\u5C42\\u7EC4\\u4EF6\\uFF08\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Popover\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"PopConfirm\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Dropdown\"), \" \\u7B49\\uFF09\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u4E3A\\u4EC0\\u4E48\\u9700\\u8981 adapter\\uFF1F\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u7531\\u4E8E Semi \\u9700\\u8981\\u540C\\u65F6\\u652F\\u6301 React 16/17/18/19\\uFF0C\\u800C React 19 \\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"createRoot\"), \" \\u4F4D\\u4E8E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"react-dom/client\"), \" \\u5B50\\u8DEF\\u5F84\\u4E2D\\uFF0C\\u76F4\\u63A5\\u5728\\u5E93\\u5185\\u90E8\\u5BFC\\u5165\\u4F1A\\u5BFC\\u81F4\\u4F4E\\u7248\\u672C React \\u62A5\\u9519\\u3002\\u56E0\\u6B64\\u6211\\u4EEC\\u91C7\\u7528 adapter \\u6A21\\u5F0F\\uFF0C\\u8BA9 React 19 \\u7528\\u6237\\u663E\\u5F0F\\u6CE8\\u5165\\u6240\\u9700\\u7684 API\\u3002\")), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u5FEB\\u901F\\u5F00\\u59CB\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5B89\\u88C5\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u65E0\\u8BBA\\u4F60\\u4F7F\\u7528\\u7684\\u662F React 16\\u300117\\u300118 \\u8FD8\\u662F 19\\uFF0C\\u90FD\\u4F7F\\u7528\\u540C\\u4E00\\u4E2A\\u5305\\uFF1A\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-bash\"\n  }, \"# npm\\nnpm install @douyinfe/semi-ui\\n\\n# yarn\\nyarn add @douyinfe/semi-ui\\n\\n# pnpm\\npnpm add @douyinfe/semi-ui\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"React 19 \\u7528\\u6237\\uFF08\\u91CD\\u8981\\uFF09\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5982\\u679C\\u4F60\\u7684\\u9879\\u76EE\\u4F7F\\u7528 \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"React 19\"), \"\\uFF0C\\u9700\\u8981\\u5728\\u5E94\\u7528\\u5165\\u53E3\\u6587\\u4EF6\\u7684\", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u6700\\u9876\\u90E8\"), \"\\u5BFC\\u5165 adapter\\uFF1A\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"// main.tsx \\u6216 index.tsx\\n// \\u26A0\\uFE0F \\u5FC5\\u987B\\u5728\\u6700\\u9876\\u90E8\\u5BFC\\u5165\\uFF0C\\u5728\\u4EFB\\u4F55 Semi \\u7EC4\\u4EF6\\u4E4B\\u524D\\nimport '@douyinfe/semi-ui/react19-adapter';\\n\\nimport ReactDOM from 'react-dom/client';\\nimport App from './App';\\n\\nReactDOM.createRoot(document.getElementById('root')!).render(<App />);\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u7136\\u540E\\u6B63\\u5E38\\u4F7F\\u7528 Semi \\u7EC4\\u4EF6\\uFF1A\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"// App.tsx\\nimport { Button, Toast, Modal, Notification } from '@douyinfe/semi-ui';\\n\\nfunction App() {\\n    const showToast = () => {\\n        Toast.success('\\u64CD\\u4F5C\\u6210\\u529F\\uFF01');\\n    };\\n\\n    const showModal = () => {\\n        Modal.confirm({\\n            title: '\\u786E\\u8BA4\\u64CD\\u4F5C',\\n            content: '\\u786E\\u5B9A\\u8981\\u6267\\u884C\\u6B64\\u64CD\\u4F5C\\u5417\\uFF1F',\\n        });\\n    };\\n\\n    return (\\n        <div>\\n            <Button onClick={showToast}>\\u663E\\u793A Toast</Button>\\n            <Button onClick={showModal}>\\u663E\\u793A Modal</Button>\\n        </div>\\n    );\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"React 16/17/18 \\u7528\\u6237\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5BF9\\u4E8E React 16\\u300117\\u300118 \\u9879\\u76EE\\uFF0C\", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u65E0\\u9700\\u4EFB\\u4F55\\u989D\\u5916\\u914D\\u7F6E\"), \"\\uFF0C\\u76F4\\u63A5\\u4F7F\\u7528\\u5373\\u53EF\\uFF1A\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"import { Button, Toast } from '@douyinfe/semi-ui';\\n\\nfunction App() {\\n    return (\\n        <Button onClick={() => Toast.success('Hello Semi!')}>\\n            Click me\\n        </Button>\\n    );\\n}\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u6CE8\\u610F\\u4E8B\\u9879\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Tooltip \\u4E0E\\u7C7B\\u7EC4\\u4EF6\\u7684\\u9650\\u5236\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u7531\\u4E8E React 19 \\u79FB\\u9664\\u4E86 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"ReactDOM.findDOMNode\"), \"\\uFF0C\\u5F53 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Tooltip\"), \"\\uFF08\\u53CA\\u57FA\\u4E8E\\u5B83\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Popover\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"PopConfirm\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Dropdown\"), \" \\u7B49\\uFF09\\u7684 children \\u662F\", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u7C7B\\u7EC4\\u4EF6\"), \"\\u65F6\\uFF0C\\u53EF\\u80FD\\u65E0\\u6CD5\\u6B63\\u786E\\u83B7\\u53D6 DOM \\u8282\\u70B9\\u8FDB\\u884C\\u5B9A\\u4F4D\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u53D7\\u5F71\\u54CD\\u7684\\u573A\\u666F\"), \"\\uFF1A\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"// \\u274C \\u7C7B\\u7EC4\\u4EF6\\u4F5C\\u4E3A Tooltip \\u7684\\u76F4\\u63A5\\u5B50\\u5143\\u7D20\\u53EF\\u80FD\\u65E0\\u6CD5\\u6B63\\u786E\\u5B9A\\u4F4D\\nclass MyComponent extends React.Component {\\n    render() {\\n        return <span {...this.props}>Content</span>;\\n    }\\n}\\n\\n<Tooltip content=\\\"\\u63D0\\u793A\\\">\\n    <MyComponent />\\n</Tooltip>\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u89E3\\u51B3\\u65B9\\u6848\"), \"\\uFF1A\\u7528 DOM \\u5143\\u7D20\\u5305\\u88F9\\u7C7B\\u7EC4\\u4EF6\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"// \\u2705 \\u63A8\\u8350\\uFF1A\\u7528 DOM \\u5143\\u7D20\\u5305\\u88F9\\n<Tooltip content=\\\"\\u63D0\\u793A\\\">\\n    <span>\\n        <MyComponent />\\n    </span>\\n</Tooltip>\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u4E0D\\u53D7\\u5F71\\u54CD\\u7684\\u573A\\u666F\"), \"\\uFF1A\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u51FD\\u6570\\u7EC4\\u4EF6\\u914D\\u5408 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"forwardRef\"), \" \\u6B63\\u786E\\u8F6C\\u53D1 ref \\u7684\\u60C5\\u51B5\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u539F\\u751F DOM \\u5143\\u7D20\\uFF08\\u5982 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"<span>\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"<div>\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"<button>\"), \" \\u7B49\\uFF09\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u9519\\u8BEF\\u63D0\\u793A\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5982\\u679C\\u4F60\\u5728 React 19 \\u4E2D\\u5FD8\\u8BB0\\u5BFC\\u5165 adapter\\uFF0C\\u63A7\\u5236\\u53F0\\u4F1A\\u663E\\u793A\\u4EE5\\u4E0B\\u9519\\u8BEF\\uFF1A\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\"\n  }, \"[Semi UI] createRoot is not available. \\nIf you are using React 19, please inject createRoot before using Semi components.\\nFor details, see: https://semi.design/zh-CN/ecosystem/react19\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u770B\\u5230\\u6B64\\u9519\\u8BEF\\u65F6\\uFF0C\\u8BF7\\u5728\\u5165\\u53E3\\u6587\\u4EF6\\u9876\\u90E8\\u6DFB\\u52A0\\uFF1A\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"import '@douyinfe/semi-ui/react19-adapter';\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u5E38\\u89C1\\u95EE\\u9898\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Q: \\u5728 React 18 \\u4E2D\\u5BFC\\u5165 adapter \\u4F1A\\u6709\\u95EE\\u9898\\u5417\\uFF1F\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"A: \\u4E0D\\u4F1A\\u3002\\u5728 React 18 \\u4E2D\\uFF0CSemi \\u4F1A\\u81EA\\u52A8\\u68C0\\u6D4B\\u5E76\\u4F7F\\u7528\\u5185\\u7F6E\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"createRoot\"), \"\\uFF0Cadapter \\u7684\\u5BFC\\u5165\\u4E0D\\u4F1A\\u4EA7\\u751F\\u526F\\u4F5C\\u7528\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Q: adapter \\u505A\\u4E86\\u4EC0\\u4E48\\uFF1F\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"A: adapter \\u53EA\\u505A\\u4E00\\u4EF6\\u4E8B\\uFF1A\\u5C06 React 19 \\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"createRoot\"), \" \\u51FD\\u6570\\u6CE8\\u5165\\u5230 Semi \\u5185\\u90E8\\uFF0C\\u4F7F Modal\\u3001Toast\\u3001Notification \\u7B49\\u7EC4\\u4EF6\\u80FD\\u591F\\u6B63\\u5E38\\u5DE5\\u4F5C\\u3002\\u4EE3\\u7801\\u975E\\u5E38\\u7B80\\u5355\\uFF1A\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"import { createRoot } from 'react-dom/client';\\nimport semiGlobal from './_utils/semi-global';\\n\\nsemiGlobal.config.createRoot = createRoot;\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Q: \\u4E3A\\u4EC0\\u4E48 adapter \\u5FC5\\u987B\\u5728\\u6700\\u9876\\u90E8\\u5BFC\\u5165\\uFF1F\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"A: \\u56E0\\u4E3A adapter \\u9700\\u8981\\u5728\\u4EFB\\u4F55 Semi \\u7EC4\\u4EF6\\u6E32\\u67D3\\u4E4B\\u524D\\u5B8C\\u6210 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"createRoot\"), \" \\u7684\\u6CE8\\u5165\\u3002\\u5982\\u679C\\u5728\\u7EC4\\u4EF6\\u5DF2\\u7ECF\\u5F00\\u59CB\\u6E32\\u67D3\\u540E\\u624D\\u5BFC\\u5165\\uFF0C\\u53EF\\u80FD\\u4F1A\\u5BFC\\u81F4\\u9996\\u6B21\\u6E32\\u67D3\\u5931\\u8D25\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Q: \\u6211\\u4E4B\\u524D\\u4F7F\\u7528\\u7684\\u662F \", mdx(\"inlineCode\", {\n    parentName: \"strong\"\n  }, \"@douyinfe/semi-ui-19\"), \"\\uFF0C\\u5982\\u4F55\\u8FC1\\u79FB\\uFF1F\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"A: \"), mdx(\"ol\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u5378\\u8F7D \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"@douyinfe/semi-ui-19\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u5B89\\u88C5 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"@douyinfe/semi-ui\"), \"\\uFF08\\u5982\\u679C\\u8FD8\\u6CA1\\u5B89\\u88C5\\uFF09\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u5C06\\u6240\\u6709 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"from '@douyinfe/semi-ui-19'\"), \" \\u6539\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"from '@douyinfe/semi-ui'\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u5728\\u5165\\u53E3\\u6587\\u4EF6\\u9876\\u90E8\\u6DFB\\u52A0 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"import '@douyinfe/semi-ui/react19-adapter'\")))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u6280\\u672F\\u7EC6\\u8282\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u7248\\u672C\\u517C\\u5BB9\\u6027\\u77E9\\u9635\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"React \\u7248\\u672C\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u9700\\u8981 adapter\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"th\"\n  }, \"ReactDOM.render\")), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"th\"\n  }, \"createRoot\")))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"16.x\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5426\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u2705 \\u4F7F\\u7528\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u274C \\u4E0D\\u5B58\\u5728\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"17.x\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5426\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u2705 \\u4F7F\\u7528\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u274C \\u4E0D\\u5B58\\u5728\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"18.x\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5426\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u26A0\\uFE0F \\u5DF2\\u5E9F\\u5F03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u2705 \\u81EA\\u52A8\\u4F7F\\u7528\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"19.x\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"\\u662F\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u274C \\u5DF2\\u79FB\\u9664\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u2705 \\u9700\\u6CE8\\u5165\")))), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"adapter \\u7684\\u5DE5\\u4F5C\\u539F\\u7406\"), mdx(\"ol\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"React 16/17\\uFF1A\\u4F7F\\u7528\\u4F20\\u7EDF\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"ReactDOM.render\"), \" \\u548C \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"ReactDOM.unmountComponentAtNode\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"React 18\\uFF1A\\u81EA\\u52A8\\u68C0\\u6D4B\\u5E76\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"react-dom\"), \" \\u5BFC\\u51FA\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"createRoot\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"React 19\\uFF1A\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"createRoot\"), \" \\u4E0D\\u518D\\u4ECE \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"react-dom\"), \" \\u76F4\\u63A5\\u5BFC\\u51FA\\uFF0C\\u9700\\u8981\\u4ECE \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"react-dom/client\"), \" \\u5BFC\\u5165\\uFF0C\\u901A\\u8FC7 adapter \\u6CE8\\u5165\"))));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"zh-CN/ecosystem/react19","next":{"fields":{"slug":"en-US/advanced/customize-theme"},"id":"e7a25faf-d186-5600-85ed-0723ab8391b7","frontmatter":{"title":"Customized Themes","localeCode":"en-US","icon":"doc-theme","showNew":null}},"previous":{"fields":{"slug":"en-US/ecosystem/react19"},"id":"32b7869f-672c-5e7a-95a3-207d8a7110cb","frontmatter":{"title":"React 19 Adaptation","localeCode":"en-US","icon":"doc-configprovider","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}