React.js渲染不同的标题栏

Question

我有一个React组件问题。

在React应用中，我想为移动设备显示一个不同的标题栏，为笔记本电脑或台式机显示另一个标题。我正在使用material-ui标头。我已经创建了两个单独的标头组件，所以如何配置 它们在App.jsx主目录中显示，以便在移动设备上显示一个标头，而在用户使用笔记本电脑时显示另一个标头？

const headerLaptop =() ={
return (
<div>header element</div>
);
};

const headerMobile =() ={
return (
<div>header element</div>
);
};

const App =() ={
return (
<div>headerMobile or headerLaptop</div>
);
};

Answer 1

如果您使用的是Material-ui，则可以使用withWidth see doc and example here