[英]Choosing a random styled component in React.js
I have probably an impossible thing I would like to do for my portfolio site. 我可能想为自己的投资组合网站做一件不可能的事情。 I want to use the React-Burger-Menu library and import all of the menu components and choose one at random upon screen load.
我想使用React-Burger-Menu库并导入所有菜单组件,并在屏幕加载时随机选择一个。 I decided to create an array with all of the imports and use a math.random function to see if that will work.
我决定创建一个包含所有导入内容的数组,并使用math.random函数查看是否可行。 Of course, it doesn't.
当然不是。 I understand this is probably really dumb, but I think it would be so cool if it worked.
我知道这可能真的很愚蠢,但是我认为如果可行的话,它会很酷。 Here is what I have so far for the random function:
到目前为止,这是我对随机函数的了解:
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;
And here like it says in the documentation I am wrapping my nav with <Menu></Menu>
tags. 就像它在文档中所说的那样,我用
<Menu></Menu>
标签包装了导航。 Here is the code: 这是代码:
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>
);
}
}
export default customnav; 导出默认的customnav;
Here is the error code: Cannot read property 'length' of undefined
这是错误代码:
Cannot read property 'length' of undefined
I realize this is a stretch, but thank you for your help. 我知道这很麻烦,但谢谢您的帮助。
Wrong syntax of array, you can just do 数组语法错误,您可以这样做
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;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.