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

【问题标题】：Resizing a React navigation bar component when width is reduced?宽度减小时调整 React 导航栏组件的大小？
【发布时间】：2016-08-23 19:29:37
【问题描述】：

我的 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 的东西？

【问题讨论】：

这是一个 css 的东西。使用 css 可以非常简单地使用 flexbox、max-min-width、@media 设置等来完成这项工作。为了让 React a) 知道宽度和 b) 根据宽度应用样式，需要很多技巧。一般来说，样式用css，HTML结构+逻辑用react。
我正计划使用 CSS 路线来解决这个问题。我在这方面相对较新，所以我不确定你提到的参数。 flexbox 是否允许快速修复？
尝试使用npmjs.com/package/react-nav-bar作为导航栏，还不错

标签： javascript jquery css reactjs frontend

【解决方案1】：

说真的，你最好的选择是 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

您可以找到working demo in codepen here。

【讨论】：

button.hamburger:focus + ul.menu 这是 SASS 的东西吗？我目前只使用 CSS，想知道是否有这样的 CSS 解决方案？
“+”是纯 CSS。它的意思是“跟随”，所以带有焦点的按钮后跟ul是选择器，而ul获取样式。

【解决方案2】：

您可以在 CSS 中使用适当的媒体查询来处理这个问题。

但如果你更喜欢用 React 来做，这里是你可以如何实现它，监听窗口“resize”事件：

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 中处理它？这会是什么方法？我的设置是否犯了新手错误？

【解决方案3】：

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

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

【讨论】：