import React from 'react' ; import ReactDOM from 'react-dom' ; import Navbar from '@arco-design/arco-site-navbar' ; import { ConfigProvider } from '@arco-design/web-react' ; import './index.less' ; interface NavBarOptions { version ? : string ; lang ? : string ; handleLanguageChange ? : ( lang : string ) => void ; } const ReactApp = ( { lang = 'zh-CN' , handleLanguageChange = ( ) => { } , version , } ) => { return ( < ConfigProvider prefixCls = { 'arco-react' } > < Navbar . NavbarThemeProvider > < Navbar lang = { lang } onChangeLanguage = { handleLanguageChange } hideSearch defaultVersion = { version } onChangeTheme = { ( theme ) => { document . querySelector ( '#react-root' ) ?. setAttribute ( 'arco-theme' , theme ) ; } } loginHref = { `/login?redirectUrl=${ window . location . href }` } versions = { [ { version : '1.x' , link : 'https://design.bytedance.com/vue/docs/start' } , { version , link : '/vue' } , ] } / > < /Navbar.NavbarThemeProvider> < /ConfigProvider>); } ; const renderNavBar = ( options ? ) => { ReactDOM . render ( < ReactApp { ... ( options ?? { } ) } / > , document . getElementById ( 'react-root' ) ) ; } ; export default renderNavBar ;