Skip to content

Using the Menu component but getting an error #1127

@p0ssword

Description

@p0ssword

Hi, I'm using the Menu component in my project, although some content can be displayed and works fine, but the second level or even multi-level menus don't work correctly, checking the console there is an error message
Here is the React version and Element-react version.

Here are the React version and the Element-react version

Name Version
React ^18.3.1
React-dom ^18.3.1
element-react ^1.4.34
element-theme-default ^1.4.13

Here is the source code

// App.jsx

import './App.css';
import { Menu } from 'element-react';

function App() {

  const onOpen = () => {
    console.log('onOpen');
  }

  const onClose = () => {
    console.log('onClose');
  }

  return (
    <main>
      <div className="nav">
        <Menu
          defaultActive="2"
          className="el-menu-vertical-demo"
          /* onOpen={this.onOpen.bind(this)}
          onClose={this.onClose.bind(this)} */
        >
          <Menu.SubMenu index="1" title="导航一">
            <Menu.ItemGroup title="分组一">
              <Menu.Item index="1-1">选项1</Menu.Item>
              <Menu.Item index="1-2">选项2</Menu.Item>
            </Menu.ItemGroup>
            <Menu.ItemGroup title="分组2">
              <Menu.Item index="1-3">选项3</Menu.Item>
            </Menu.ItemGroup>
          </Menu.SubMenu>
          <Menu.Item index="2">导航二</Menu.Item>
          <Menu.Item index="3">导航三</Menu.Item>
        </Menu>
      </div>
    </main>
  );
}

export default App;
// main.jsx

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.jsx';
import './index.css';
import 'element-theme-default';

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>
);

The following is the error message

Warning: Component "li" contains the string ref "submenu-title". Support for string refs will be removed in a future major release. We recommend using useRef() or createRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref
    at li
    at SubMenu2 (http://localhost:5174/node_modules/.vite/deps/element-react.js?v=80a16a5a:12502:41)
    at ul
    at Menu2 (http://localhost:5174/node_modules/.vite/deps/element-react.js?v=80a16a5a:12314:41)
    at div
    at main
    at App

image

Warning: Legacy context API has been detected within a strict-mode tree.

The old API will be supported in all 16.x releases, but applications using it should migrate to the new version.

Please update the following components: Menu2, MenuItem2, MenuItemGroup2, SubMenu2

Learn more about this warning here: https://reactjs.org/link/legacy-context
    at Menu2 (http://localhost:5174/node_modules/.vite/deps/element-react.js?v=80a16a5a:12314:41)
    at div
    at main
    at App

image

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions