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
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions