React: For a web application how to add different functionally on Buttons for different views(Mobile and Desktop View)

Question

在React的一个演示项目中工作时，我希望按钮的功能在移动视图和桌面视图中的工作方式不同。所以我只想知道最好的方法是什么..谢谢...

Answer 1

Try react-responsive package . Show the difference button based on Different view port

React-responsive library reference

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>
);