0

它运行良好：

class Layout extends React.Component {
  render() {
    return <div className="mdl-layout mdl-js-layout">
      <div className="mdl-layout__header">
        <div className="mdl-layout__header-row">
          <span className="mdl-layout-title">Remember</span>
        </div>
      </div>

      <div className="mdl-layout__drawer">
        <span className="mdl-layout-title">Remember</span>
        <div className="mdl-navigation">
          <a className="mdl-navigation__link" href="">Link</a>
          <a className="mdl-navigation__link" href="">Link</a>
          <a className="mdl-navigation__link" href="">Link</a>
          <a className="mdl-navigation__link" href="">Link</a>
        </div>
      </div>

      <div className="mdl-layout__drawer-button">
        <i className="material-icons">menu</i>
      </div>

      <div className="mdl-layout__content">
        <div className="page-content">{this.props.children}</div>
      </div>
    </div>;
  }
}

但是，它现在不起作用：

class Layout extends React.Component {
  render() {
    return <div className="mdl-layout mdl-js-layout mdl-layout--fixed-header">
      <div className="mdl-layout__header">
        <div className="mdl-layout__header-row">
          <span className="mdl-layout-title">Remember</span>
        </div>
      </div>

      <div className="mdl-layout__drawer">
        <span className="mdl-layout-title">Remember</span>
        <div className="mdl-navigation">
          <a className="mdl-navigation__link" href="">Link</a>
          <a className="mdl-navigation__link" href="">Link</a>
          <a className="mdl-navigation__link" href="">Link</a>
          <a className="mdl-navigation__link" href="">Link</a>
        </div>
      </div>

      <div className="mdl-layout__drawer-button">
        <i className="material-icons">menu</i>
      </div>

      <div className="mdl-layout__content">
        <div className="page-content">{this.props.children}</div>
      </div>
    </div>;
  }
}

两个代码块的区别只是mdl-layout--fixed-header类。要使用固定标题，插入类mdl-layout--fixed-header停止工作抽屉。这种用法有问题吗？

4

1 回答 1

-1

出色地...

我找到了原因。

使用mdl-layout--fixed-header类时，

<div className="mdl-layout__drawer-button">
  <i className="material-icons">menu</i>
</div>

不需要。

:(

非常感谢。

于 2015-08-02T04:33:49.227 回答