[英]Iterating through arrays in react
This might be a really easy questions but I just can't wrap my head around it .. 这可能是一个非常简单的问题,但我无法解决这个问题。
This code is for generating a side menu. 此代码用于生成侧面菜单。 Now this is only the last of many attempts but since the side menu is quite large, I wanted to somehow automate its generation but no matter what I do, I can't iterate through the array to generate links. 现在这只是许多尝试中的最后一次,但是由于侧面菜单很大,我想以某种方式使它的生成自动化,但是无论我做什么,我都无法遍历数组来生成链接。
class App extends Component {
render() {
return (
<Router>
<div style={{ display: 'flex' }}>
<div style={{
padding: '10px',
width: '40%',
background: '#f0f0f0'
}}>
<ul style={{ listStyleType: 'none', padding: 0 }}>
routes.forEach(route => {
<li><Link to={route.path}>{route.title}</Link>/li>
});
</ul>
{routes.map((route) => (
<Route
key={route.path}
path={route.path}
exact={route.exact}
/>
))}
</div>
<div style={{ flex: 1, padding: '10px' }}>
{routes.map((route) => (
<Route
key={route.path}
path={route.path}
exact={route.exact}
component={route.main}
/>
))}
</div>
</div>
</Router >
)
}
}
This one is probably the worst try off all but it was a try of desperation. 这可能是最糟糕的尝试,但那是一种绝望的尝试。
尝试:
routes.map(route => (<li key={route.path}> <Link to={route.path}>{route.title}</Link> </li>));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.