宽度减小时调整React导航栏组件的大小

Resizing a React navigation bar component when width is reduced?

本文关键字：组件 导航 React 小时 调整      更新时间：2023-09-26

我的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中找到一个工作演示。

如果你想在手机上呈现下拉菜单，这里有一个策略：

  1. 在React中侦听媒体查询更改：http://krasimirtsonev.com/blog/article/Using-media-queries-in-JavaScript-AbsurdJS-edition.
  2. 使用该侦听器更新组件上的this.state（例如：this.state.isMobile）
  3. 根据媒体查询条件（例如：this.state.isMobile ? <Navigation type="mobile" /> : <Navigation type="desktop" />）呈现不同的导航组件
相关文章：