Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Using the Menu component but getting an error #1127

Open
p0ssword opened this issue Sep 9, 2024 · 1 comment
Open

Using the Menu component but getting an error #1127

p0ssword opened this issue Sep 9, 2024 · 1 comment

Comments

@p0ssword
Copy link

p0ssword commented Sep 9, 2024

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

@p0ssword
Copy link
Author

p0ssword commented Sep 9, 2024

嗨, 我在我的项目中使用Menu这个组件, 虽然有些内容可以显示且正常使用, 但是二级甚至于多级菜单不能正常运行, 查看控制台有报错信息

以下为React版本和Element-react版本

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

以下为源代码

// 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>
);

以下为报错信息

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant