css - React - 响应式应用程序 - 最好通过 CSS 隐藏组件中的元素或不渲染它

Question

我目前正在开发一个基于 React.js 的应用程序。假设我们在 React 中有一个 Header 组件，里面有一个小 Logo 组件，应该只在移动分辨率级别显示。我正在从父组件传递 isMobile Prop 。该 Prop 基于:

const mql = global.matchMedia(`(min-width: 768px)`);
mql.addListener(() => this._mediaQueryChanged());
this.setState({
  mql: mql,
  isMobile: !mql.matches
});

_mediaQueryChanged() {
  this.setState({
    isMobile: !this.state.mql.matches
  });
}


<Header isMobile={this.state.isMobile} />

在 Header 中:

render() {
  const {isMobile} = this.props;
  const containerClass = classNames('header-component', {
    'is-mobile': isMobile
  });
  return (
    <header className={containerClass}>
      {
        isMobile && 
        (
          <section className="mobile-header">
            <Button className="toggle-menu" onClick={() => this._toggleMenu()}>
              <Icon name="menu" />
            </Button>
            <Logo className="header-logo" />
          </section>
        )
      }
      <span>login</span>
    </header>
  );
}

如果 mql 匹配，则它不是移动的。我的问题是:我是否应该在每次更改媒体查询时传递此参数并重新渲染组件？在重新渲染隐藏/显示 Logo 组件期间？或者只是使用 CSS 来显示/隐藏它，组件将一直安装在那里。没有重新渲染。

想法？

Answer 1

我同意这可能只是 CSS 的工作。

.header-class .logo {
  display:none;
}

@media only screen and (min-width: 768px) {
    .header-class .logo {
      display:block;
    }
}