在Reactjs

Question

我有一个场景，我的React组件在桌面和平板电脑中呈现相同的UI，但移动设备中的UI不同。

以下是我用来确定桌面和移动设备的方式。我如何确定并包含平板电脑？

const isMobile = (userAgent = navigator.userAgent) => /Mobi/.test(userAgent);

export const Mobile = ({ children }) => (isMobile() ? children : null);
export const Desktop = ({ children }) => (isMobile() ? null : children);

然后在我使用的反应组件中，在下面我如何确定平板电脑模式。对于桌面或平板电脑，我需要渲染相同的组件。

<MyCompSection>
    <Desktop> // or Tablet, but how to determine Tablet
        <MyComponent/>
    </Desktop>
    <Mobile>
        <MyComponent/>
    </Mobile>
</MyCompSection>

我看到平板电脑的用户代理也作为移动设备返回。 这种情况下的最佳做法是什么？

Answer 1

您可以使用react-responsive根据设备宽度呈现不同的组件。