我想在我的网站上实现一个导航栏,其中包含一些使用 JavaScript 的操作,但我不知道如何在组件的渲染中实现 JavaScript。
这是 JavaScript 中的代码:
$(document).ready(function () {
var trigger = $('.hamburger'),
overlay = $('.overlay'),
isClosed = false;
trigger.click(function () {
hamburger_cross();
});
function hamburger_cross() {
if (isClosed == true) {
overlay.hide();
trigger.removeClass('is-open');
trigger.addClass('is-closed');
isClosed = false;
} else {
overlay.show();
trigger.removeClass('is-closed');
trigger.addClass('is-open');
isClosed = true;
}
}
$('[data-toggle="offcanvas"]').click(function () {
$('#wrapper').toggleClass('toggled');
});
});
这是我在 ReactJS 中的组件:
import React from 'react';
class LateralMenu extends React.Component {
render() {
return (
<nav className="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation">
<ul className="nav sidebar-nav">
<li className="sidebar-brand">
<a href="#">
Bootstrap 3
</a>
</li>
<li>
<a href="#"><i className="fa fa-fw fa-home" /> Home</a>
</li>
<li>
<a href="#"><i className="fa fa-fw fa-folder" /> Page one</a>
</li>
<li>
<a href="#"><i className="fa fa-fw fa-file-o" /> Second page</a>
</li>
<li>
<a href="#"><i className="fa fa-fw fa-cog" /> Third page</a>
</li>
<li className="dropdown">
<a href="#" className="dropdown-toggle" data-toggle="dropdown"><i className="fa fa-fw fa-plus"/> Dropdown <span className="caret"></span></a>
<ul className="dropdown-menu" role="menu">
<li className="dropdown-header">Dropdown heading</li>
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li>
<a href="#"><i className="fa fa-fw fa-bank" /> Page four</a>
</li>
<li>
<a href="#"><i className="fa fa-fw fa-dropbox" /> Page 5</a>
</li>
<li>
<a href="#"><i className="fa fa-fw fa-twitter" /> Last page</a>
</li>
</ul>
</nav>
);
}
}
export default LateralMenu;
据我所知,您已经实现了一个侧边栏,并通过一个汉堡包按钮更改了它的可见性。
这就排除了 Redux 等其他选项。然而,有时简单的解决方案摆在我们面前,我们总是选择复杂的。
要做你想做的事,你只需要知道几件事:
context
React 旨在将 UI 分解为小的、可重用的模块。您无需将整个 UI 放在单个 HTML 文件中,而是将该文件分成小块并将它们转换为组件。Vue.js 2、Ember.js 和 Angular 2 等其他框架也使用了相同的方法。
让我们假设以下情况;我们的 UI 由 4 个元素组成:
所有这些构成了第 5 个组件,即
Dashboard
.仪表板
这里重要的部分是
Dashboard.childContextTypes
和getChildContext
。使用context
时可以向下共享属性;也就是说,父级与其子级共享属性,范围从文本到函数。通过
childContextTypes
您指定要共享的属性,以及每个属性的类型。您可以在此处查看类型列表。必须为它们提供默认值,这是通过getChildContext
.属性
sidebarVisible
指示侧边栏的状态,toggleSidebar
是一个更改状态并因此导致组件更新的函数,以及属性,在和sidebarVisible
之间交替。true
false
侧边栏
孩子们还必须定义他们希望在其中可用的类型
context
,这是通过contextTypes
. 通过这样做,您将sidebarVisible
在对象context
(this.context
) 中可用。当 state 更新
sidebarVisible
时,Dashboard
会发生的情况是 的值也将更新context
,并将反映在所有子项中。在这个组件中,我们context
通过生命周期方法捕获了新的组件componentWillUpdate
,并使用context
. 接下来会发生的是更新状态Sidebar
将重新渲染组件,并且该行将classes += this.state.visible ? 'visible' : '';
返回visible
o 空,这将通过 CSS 类使菜单可见或不可见visible
。最佳
主要的
示范
完整代码(下面的演示):
您可以在这支 Pen中看到正在工作的代码。