search

ElemeFE / element-react

Element UI
https://elemefe.github.io/element-react/index
MIT License
2.84k stars 441 forks source link

Using the Menu component but getting an error #1127

Open p0ssword opened 1 month ago

p0ssword commented 1 month ago

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 commented 1 month ago

嗨, 我在我的项目中使用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