Реагировать: Для веб-приложения, как добавить разные функциональные кнопки для разных представлений (мобильное и настольное представление)

#reactjs

#reactjs

Вопрос:

Во время работы над демонстрационным проектом в React в определенный момент я хочу, чтобы функциональность кнопки работала по-разному в мобильном представлении и на рабочем столе.Итак, я просто хочу знать, каков наилучший способ сделать это.. Спасибо..

Ответ №1:

Попробуйте react-отзывчивый пакет. Показать отличающуюся кнопку на основе другого порта просмотра

React-отзывчивая ссылка на библиотеку

 import MediaQuery from 'react-responsive';

const Example = () => (
  <div>
    <div>Device Test!</div>
      <div>You are a desktop or laptop</div>
      <MediaQuery query="(min-device-width: 1824px)">
        <div>You also have a huge screen</div>
        <Button onClick={handleMethod()} />
      </MediaQuery>
      <MediaQuery query="(max-width: 1224px)">
        <Button onClick={handleAnotherMethod()} />
      </MediaQuery>
  </div>
);