React.js渲染不同的标题栏

时间:2018-11-20 07:54:42

标签: reactjs redux header components

我有一个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>
);
};

1 个答案:

答案 0 :(得分:0)

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