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

Question

我的网络应用程序有一个导航栏，具有以下 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

如果您想在移动设备上呈现下拉菜单，可以采用以下一种策略：

监听 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 2

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

但是如果你更喜欢用 React 来做，这里是你如何实现它，监听 window "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 />
        );
    }
}

Answer 3

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

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

Resizing a React navigation bar component when width is reduced?

javascript

css

jquery

frontend

reactjs