在 AngularJs 中使用 React Js 创建类似桌面的菜单

Question

我找到了一个 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 实现此目的的任何帮助？

Answer 1

在 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

在 AngularJs 中使用 React Js 创建类似桌面的菜单

Use React Js to create Desktop like menu in AngularJs

angularjs

reactjs

angularjs-directive