Question

在小型设备（电话）上，我想显示<Foo/>组件，而在大型（台式机）<Bar/>上，像这样

function MyComp (props) {
   if (isMobile) 
        return <Foo/>
   else 
        return <Bar/>
    }
}

我只能在Material UI中找到2种可能的实现方式：

使用Hidden组件
使用withWidth HOC

在这种情况下，带有HOC的选项在我看来似乎更正确，但显然它不能与SSR一起正常工作（但Hidden可以）。

那么就最佳实践而言，可以使用两个Hidden元素吗？像这样：

function MyComp (props) {

  return (
    <>
      <Hidden mdUp implementation="css">
        <Foo/>
      </Hiddne>
      <Hidden smDown implementation="css">
        <Bar/>
      </Hidden>
    </>

  )
}

Answer 1

像这样使用=A1="February"没问题，它只是添加了一个<Hidden />以及必要的CSS以显示或不显示您的组件。不过，更好的方法是将CSS类直接添加到<div>和<Foo />组件中，以避免在页面中出现额外的<Bar />，例如：

<div>

在SSR设置中，function MyComp (props) { return ( <> <Foo className={props.classes.foo} /> <Bar className={props.classes.bar} /> </> ) }是必需的，因为JS实现可能会“刷新”页面上的组件，然后在加载JS后将其删除。 CSS实现的缺点是该元素保留在DOM中。

PS：implementation="css" will be deprecated。

材质用户界面。根据断点显示不同的组件（SSR）

1 个答案: