Question

我的webapp有一个导航栏，其中包含以下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的东西？

Answer 1

您可以使用适当的媒体查询在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 />
        );
    }
}

Answer 2

如果你想在移动设备上呈现一个下拉菜单，这里有一个策略：

在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" />）。

Answer 3

说真的，你最好的选择是css。让我们专注于您的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

您可以找到working demo in codepen here。

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

3 个答案: