それはうまく運営されています:
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>;
}
}
2 つのコード ブロックの違いは単なるmdl-layout--fixed-header
クラスです。固定ヘッダーを使用するには、挿入されたクラスmdl-layout--fixed-header
がドロワーの作業を停止します。この使い方で問題はありませんか?