在 AngularJs 中使用 React Js 创建类似桌面的菜单
Use React Js to create Desktop like menu in AngularJs
我找到了一个 good menu creator for React Js 但我的整个应用程序都在 AngularJs 所以我只想使用菜单创建来创建主页菜单,而其余的工作将由angularjs。但是我在谷歌上搜索了解决方案,但 none 似乎已经解决了我将近 3 天的问题。
我创建菜单的react Js函数如下:
import React, { useEffect, useState } from "react";
import {Keys, Menu, MenuBar, Separator} from 'react-app-menu';
function MenuToolBar() {
const handleMenuSelect = (menuId) => {
toggleLoading(true);
setTimeout(() => {
openModal();
setSelectedFile({name: menuId });
}, 500);
};
const [selectedFile, setSelectedFile] = useState({});
const [showModal, toggleModal] = useState(false);
const openModal = () => {
toggleModal(true);
};
const closeModal = () => {
toggleModal(false);
};
const onFolderSelect = (): void => {
console.log('Folder selected');
};
return (<div style={{background: '#FBFBFB', borderBottom: '1px solid rgb(218, 220, 224)'}}>
<MenuBar onSelect={handleMenuSelect}>
<Menu label='File' focusKey={"F"}>
<Menu label='New'>
<Menu menuId='NewNotebook' label='Notebook'}/>
<Menu menuId="NewNote" label='Note' hotKeys={Keys.ctrlAlt('N')}/>
<Separator/>
<Menu label="Folder" hotKeys={Keys.ctrlAlt("F")}
onSelect={onFolderSelect}/>
</Menu>
<Menu label='Settings' hotKeys={Keys.altShift("S")}/>
</Menu>
<Menu label='Edit' focusKey='E'>
<Menu menuId='search' label='Search' hotKeys={Keys.ctrlShift('F')}/>
<Menu menuId='undo' label='Undo' hotKeys={Keys.ctrl('Z')}/>
<Menu menuId='rename' label='Rename' hotKeys={Keys.shift('F6')}/>
</Menu>
<Menu label='View' focusKey='V'>
<Menu menuId='toolbar' label='Toolbars' checked={showToolbar} hotKeys={Keys.ctrlAlt("T")}/>
<Menu menuId='statusBar' label='StatusBar'/>
<Menu menuId='toolTips' label='Tooltips' checked={showTooltip} hotKeys={Keys.ctrlAltShift("T")}/>
</Menu>
</MenuBar>
</div>);
}
我厌倦了为此使用指令 angular 但卡住了
Angularjs 指令如下:-
angular.module( "Demo" ).directive(
"reactMenu",
function reactMenuDirective( ReactMenu ) {
return({
link: link,
scope: {
menu: "=",
onMenuClick: "&"
}
});
function link( scope, element, attributes ) {
scope.$watch( "menu", renderReactElement );
scope.$on( "$destroy", unmountReactElement );
function renderReactElement() {
var props = {
menu: scope.menu,
onMenuClick: function( menuId ) {
scope.$apply(
function changeViewModel() {
scope.onMenuClick({
like: menuId
});
}
);
}
};
React.render(
React.createElement( ReactMenu, props ),
element[ 0 ]
);
}
function unmountReactElement() {
React.unmountComponentAtNode( element[ 0 ] );
}
}
}
);
关于如何在 AngularJs 中使用 React 实现此目的的任何帮助?
在 angularjs
中嵌入一个 React 组件,只是为了使用一个库,通常不是一个好主意,需要额外的努力来集成它们。
但是,如果您确实需要,可以在 angularjs
应用程序中创建 <div id="react-root"></div>
,然后在其中呈现 react
菜单。 (有关更多详细信息,请搜索 how to embed react in angularjs
。)
ReactDOM.render(<MyReactMenu />, document.getElementById('react-root'));
但是你最好使用js
或jquery
或angularjs
或bootstrap
。例如 bootstrap 支持带有子菜单的下拉菜单 (link)。只需搜索 javascript sub menu library
即可找到一些替代方案。
但是我将这个 React 菜单嵌入 angularjs 并且它起作用了:
(运行 它在 Codepen 上在线)
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="myApp">
<menu-directive></menu-directive>
</div>
<script>
var app = angular.module("myApp", []);
app.controller('ctrl', ctrl);
function ctrl($scope, $filter){
loadReact()
}
app.directive("menuDirective", function() {
return {
template : "<div><h1>I am angular!</h1><div id='root'></div></div>",
controller: 'ctrl'
};
});
</script>
<script>
var loadReact = ()=> {
// first compile your react app, then put the compiled script here
}
</script>
<!-- i compiled this reactjs script -->
<script src="https://cdn.jsdelivr.net/gh/ya3ya6/stackplay_2_menu/script.js"></script>
运行 在线 Codepen
我找到了一个 good menu creator for React Js 但我的整个应用程序都在 AngularJs 所以我只想使用菜单创建来创建主页菜单,而其余的工作将由angularjs。但是我在谷歌上搜索了解决方案,但 none 似乎已经解决了我将近 3 天的问题。
我创建菜单的react Js函数如下:
import React, { useEffect, useState } from "react";
import {Keys, Menu, MenuBar, Separator} from 'react-app-menu';
function MenuToolBar() {
const handleMenuSelect = (menuId) => {
toggleLoading(true);
setTimeout(() => {
openModal();
setSelectedFile({name: menuId });
}, 500);
};
const [selectedFile, setSelectedFile] = useState({});
const [showModal, toggleModal] = useState(false);
const openModal = () => {
toggleModal(true);
};
const closeModal = () => {
toggleModal(false);
};
const onFolderSelect = (): void => {
console.log('Folder selected');
};
return (<div style={{background: '#FBFBFB', borderBottom: '1px solid rgb(218, 220, 224)'}}>
<MenuBar onSelect={handleMenuSelect}>
<Menu label='File' focusKey={"F"}>
<Menu label='New'>
<Menu menuId='NewNotebook' label='Notebook'}/>
<Menu menuId="NewNote" label='Note' hotKeys={Keys.ctrlAlt('N')}/>
<Separator/>
<Menu label="Folder" hotKeys={Keys.ctrlAlt("F")}
onSelect={onFolderSelect}/>
</Menu>
<Menu label='Settings' hotKeys={Keys.altShift("S")}/>
</Menu>
<Menu label='Edit' focusKey='E'>
<Menu menuId='search' label='Search' hotKeys={Keys.ctrlShift('F')}/>
<Menu menuId='undo' label='Undo' hotKeys={Keys.ctrl('Z')}/>
<Menu menuId='rename' label='Rename' hotKeys={Keys.shift('F6')}/>
</Menu>
<Menu label='View' focusKey='V'>
<Menu menuId='toolbar' label='Toolbars' checked={showToolbar} hotKeys={Keys.ctrlAlt("T")}/>
<Menu menuId='statusBar' label='StatusBar'/>
<Menu menuId='toolTips' label='Tooltips' checked={showTooltip} hotKeys={Keys.ctrlAltShift("T")}/>
</Menu>
</MenuBar>
</div>);
}
我厌倦了为此使用指令 angular 但卡住了
Angularjs 指令如下:-
angular.module( "Demo" ).directive(
"reactMenu",
function reactMenuDirective( ReactMenu ) {
return({
link: link,
scope: {
menu: "=",
onMenuClick: "&"
}
});
function link( scope, element, attributes ) {
scope.$watch( "menu", renderReactElement );
scope.$on( "$destroy", unmountReactElement );
function renderReactElement() {
var props = {
menu: scope.menu,
onMenuClick: function( menuId ) {
scope.$apply(
function changeViewModel() {
scope.onMenuClick({
like: menuId
});
}
);
}
};
React.render(
React.createElement( ReactMenu, props ),
element[ 0 ]
);
}
function unmountReactElement() {
React.unmountComponentAtNode( element[ 0 ] );
}
}
}
);
关于如何在 AngularJs 中使用 React 实现此目的的任何帮助?
在 angularjs
中嵌入一个 React 组件,只是为了使用一个库,通常不是一个好主意,需要额外的努力来集成它们。
但是,如果您确实需要,可以在 angularjs
应用程序中创建 <div id="react-root"></div>
,然后在其中呈现 react
菜单。 (有关更多详细信息,请搜索 how to embed react in angularjs
。)
ReactDOM.render(<MyReactMenu />, document.getElementById('react-root'));
但是你最好使用js
或jquery
或angularjs
或bootstrap
。例如 bootstrap 支持带有子菜单的下拉菜单 (link)。只需搜索 javascript sub menu library
即可找到一些替代方案。
但是我将这个 React 菜单嵌入 angularjs 并且它起作用了: (运行 它在 Codepen 上在线)
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="myApp">
<menu-directive></menu-directive>
</div>
<script>
var app = angular.module("myApp", []);
app.controller('ctrl', ctrl);
function ctrl($scope, $filter){
loadReact()
}
app.directive("menuDirective", function() {
return {
template : "<div><h1>I am angular!</h1><div id='root'></div></div>",
controller: 'ctrl'
};
});
</script>
<script>
var loadReact = ()=> {
// first compile your react app, then put the compiled script here
}
</script>
<!-- i compiled this reactjs script -->
<script src="https://cdn.jsdelivr.net/gh/ya3ya6/stackplay_2_menu/script.js"></script>
运行 在线 Codepen