:)
我在我的第一个React应用程序中使用Material Design Lite,布局基本上是这样的:
http://codepen.io/anon/pen/PqBJPW
<html>
<head>
<!-- Material Design Lite -->
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.indigo-pink.min.css">
<!-- Material Design icon font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- Always shows a header, even in smaller screens. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Title</span>
<!-- Add spacer, to align navigation to the right -->
<div class="mdl-layout-spacer"></div>
<!-- Navigation. We hide it in small screens. -->
<nav class="mdl-navigation mdl-layout--large-screen-only">
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Title</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
<main class="mdl-layout__content">
<div class="page-content"><!-- Your content goes here --></div>
</main>
</div>
</body>
</html>
我的反应中的组件是这样的:
内部菜单和标题我有一个&#34;标题&#34;,这是设置页面标题(如document.title)。但是,我怎么设置这个?
我的组件结构是:
头+菜单
页面组件
但每个&#34; Page组件&#34;有独特的头衔。我可以在子设置(页面内容)组件中设置状态并读取em父组件(标题+菜单)吗?
答案 0 :(得分:0)
我建议您遵循模板html的结构:
呈现mdl块的一个顶级“页面”组件:
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
3个子组件与__header,__drawer和__content元素对应,并在必要时加上子组件。
这样的“页面”状态,例如当前菜单项,相应的页面标题+标题,以及要呈现的正文内容,可以在与整个页面有关的组件中被跟踪,细节是作为道具传给孩子们。