我的Web应用程序有一个导航栏,带有以下css设置:
.navigation {
background: white;
display: flex;
height: 5em;
align-items: center;
padding: 0px 2em;
color: blue;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.075em;
border-bottom: 1px solid #E6E6E6;}
我的问题是在手机上,导航栏上的标签都挤在一起了。React中有没有一种方法可以检测页面的宽度并将所有导航选项卡折叠到下拉菜单中?或者这是CSS的东西?
您可以在CSS中使用适当的媒体查询来处理此问题。
但如果你更喜欢使用React,下面是你如何实现它,听窗口"调整大小"事件:
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
layoutMode: this.getLayoutMode(),
};
this.onResize = this.onResize.bind(this);
}
componentDidMount() {
window.addEventListener('resize', this.onResize);
}
componentWillUnmount() {
window.removeEventListener('resize', this.onResize);
}
onResize() {
this.setState({
layoutMode: this.getLayoutMode(),
});
}
getLayoutMode() {
return window.innerWidth > 1000 ?
'desktop'
: 'mobile';
}
render() {
return this.state.layoutMode === 'desktop' ? (
<NavigationBar />
) : (
<DropdownMenu />
);
}
}
说真的,你最好的选择是css。让react关注DOM的结构和交互。让css处理样式。
所以你可以保持你的反应代码简单如下:
render() {
var myMenu = ['Home','Settings','About us', 'Other stuff'];
return (
<div>
<button className='hamburger'>m</button>
<ul className='menu'>
{myMenu.map(item => {
return <MenuItem key={item} text={item}/>
})}
</ul>
</div>
);
}
在css中做样式设计(下面用Sass代码):
ul.menu
position: absolute
display: flex
flex-direction: row
width: 100%
li.menu-item
flex: 1 0 auto
padding: 10px
margin: 2px
background-color: grey
text-align: center
li.menu-item:hover
background-color: blue
button.hamburger
display: none
padding: 10px
margin: 2px
background-color: grey
@media screen and (max-width : 760px)
ul.menu
flex-direction: column
display: none
li.menu-item
background-color: orange
button.hamburger
display: block
position: absolute
button.hamburger:focus + ul.menu
display: flex
你可以在codepen中找到一个工作演示。
如果你想在手机上呈现下拉菜单,这里有一个策略:
- 在React中侦听媒体查询更改:http://krasimirtsonev.com/blog/article/Using-media-queries-in-JavaScript-AbsurdJS-edition.
- 使用该侦听器更新组件上的
this.state
(例如:this.state.isMobile
) - 根据媒体查询条件(例如:
this.state.isMobile ? <Navigation type="mobile" /> : <Navigation type="desktop" />
)呈现不同的导航组件