Как отобразить компонент только на ipad с помощью react и typescript?

#reactjs #typescript

#reactjs #typescript

Вопрос:

я хочу отобразить значок в компоненте для устройства ipad. И не отображать значок в компоненте для других.

Я новичок в разработке кода для ipad / мобильных устройств. я не уверен, как сделать вышеуказанное для устройства ipad.

ниже приведен мой код,

 function Navbar() {
    return (
        <Wrapper>
            <div>
                <LogoLink to="/">
                    <span>Title</span>
                </LogoLink>
            </div>

            <div>
                <Switch>
                    <Route path="/items" component={ComponentOne} />
                       <Route
                           exact
                           path="/items"
                           render={() => (
                           <span>Title</span>
                       )}
                   />
               </Switch>
           </div>
   
           <div>
               <Route path="/items/:id" component={Somecomponent} />
               <Icon /> //should display this icon only on ipad.
           </div>
       </Wrapper>
   );
  

}

экспортировать панель навигации по умолчанию;

Может кто-нибудь сообщить мне, как это сделать, используя react и typescript. Спасибо.

Ответ №1:

Вы можете попробовать сделать что-то вроде:

 window.navigator.userAgent.toLowerCase().includes('ipad')