在React.js中選擇一個隨機樣式的組件

Question

我可能想為自己的投資組合網站做一件不可能的事情。 我想使用React-Burger-Menu庫並導入所有菜單組件，並在屏幕加載時隨機選擇一個。 我決定創建一個包含所有導入內容的數組，並使用math.random函數查看是否可行。 當然不是。 我知道這可能真的很愚蠢，但是我認為如果可行的話，它會很酷。 到目前為止，這是我對隨機函數的了解：

import { slide as Menu0 } from 'react-burger-menu';
import { stack as Menu1 } from 'react-burger-menu';
import { elastic as Menu2 } from 'react-burger-menu';
import { bubble as Menu3 } from 'react-burger-menu';
import { push as Menu4 } from 'react-burger-menu';
import { pushRotate as Menu5 } from 'react-burger-menu';
import { scaleDown as Menu6 } from 'react-burger-menu';
import { scaleRotate as Menu7 } from 'react-burger-menu';
import { fallDown as Menu8 } from 'react-burger-menu';
import { reveal as Menu9 } from 'react-burger-menu';

Menus = Array[Menu0, Menu1, Menu2, Menu3, Menu4, Menu5, Menu6, 
Menu7, Menu8, Menu9]

var Menu = Menus[Math.floor(Math.random() * Menus.length)];

export default Menu;

就像它在文檔中所說的那樣，我用<Menu></Menu>標簽包裝了導航。 這是代碼：

import Menu from './sidebar';
import Contact from "../pages/contact";
import Portfolio from "../pages/portfolio";
import Index from "../pages/index";
import "../styles/customnav.css";

class customnav extends Component {
  render() {
    return (
      <Menu>
        <HashRouter>
          <div>
           <nav className="stroke">
            <ul className="menu">
            <li>
              <NavLink className="menu-item" to="/">
                Home
            </NavLink>
            </li>
            <li>
              <NavLink className="menu-item" to="/portfolio">
                Portfolio
            </NavLink>
            </li>
            <li>
              <NavLink className="menu-item" to="/contact">
                Contact
            </NavLink>
            </li>
          </ul>

          <Route exact path="/" component={Index} />
          <Route path="/portfolio" component={Portfolio} />
          <Route path="/contact" component={Contact} />
          </nav>
         </div>
      </HashRouter>
     </Menu>
    );
 }
}

導出默認的customnav;

這是錯誤代碼： Cannot read property 'length' of undefined

我知道這很麻煩，但謝謝您的幫助。

Answer 1

使用Array創建數組時，需要使用Array()而不是Array[]

演示版

 console.log(Array[1,2,3]); console.log(Array(1,2,3)); // OR console.log([1,2,3]); 

Answer 2

數組語法錯誤，您可以這樣做

import { slide as Menu0 } from 'react-burger-menu';
import { stack as Menu1 } from 'react-burger-menu';
import { elastic as Menu2 } from 'react-burger-menu';
import { bubble as Menu3 } from 'react-burger-menu';
import { push as Menu4 } from 'react-burger-menu';
import { pushRotate as Menu5 } from 'react-burger-menu';
import { scaleDown as Menu6 } from 'react-burger-menu';
import { scaleRotate as Menu7 } from 'react-burger-menu';
import { fallDown as Menu8 } from 'react-burger-menu';
import { reveal as Menu9 } from 'react-burger-menu';

const Menus = [Menu0, Menu1, Menu2, Menu3, Menu4, Menu5, Menu6, 
Menu7, Menu8, Menu9];

const Menu = Menus[Math.floor(Math.random() * Menus.length)];

export default Menu;