在数组中进行迭代

Question

这可能是一个非常简单的问题，但是我无法解决这个问题。

此代码用于生成侧面菜单。现在，这只是许多尝试中的最后一次，但是由于侧面菜单很大，我想以某种方式使它的生成自动化，但是无论我做什么，我都无法遍历数组来生成链接。

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 >
    )
}
}

这可能是最糟糕的尝试，但这是一次绝望的尝试。

Answer 1

尝试：

routes.map(route => (<li key={route.path}> <Link to={route.path}>{route.title}</Link> </li>));