Используйте React Js для создания настольного меню в AngularJs

Question

Я нашел хорошего создателя меню для React Js, но все мое приложение находится в AngularJs, поэтому я хочу использовать создание меню только для создания меню домашней страницы, пока Остальные работы выполнит angularjs. Однако я искал решения для этого в Google, но, похоже, ни один из них не решил мою проблему в течение почти 3 дней.

Моя реакция 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

Встраивание компонента React в angularjs только для использования библиотеки в целом не является хорошей идеей, и для их интеграции потребуются дополнительные усилия.

Однако, если вы действительно хотите, вы можете сделать это с созданием <div id="react-root"></div> в вашем angularjs приложении, а затем отобразить внутри него меню react. (для получения дополнительной информации ищите how to embed react in angularjs.)

ReactDOM.render(<MyReactMenu />, document.getElementById('react-root'));

Но лучше использовать js или jquery или angularjs или bootstrap. например, bootstrap поддерживает раскрывающиеся списки с подменю ( ссылка ). просто найдите javascript sub menu library, чтобы найти альтернативы.

Однако я встраиваю это меню реакции внутри 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