Я использую компонент <MenuItem/> из Semantic-Ui-React , в моем приложении Next.js . И получаю эту ошибку, в которой я не могу выяснить, что является источником.
Warning: Failed prop type: Invalid prop `children` supplied to `MenuItem`, expected a ReactNode.
in MenuItem (created by MobileContainer)
in MobileContainer (created by LinkNavWithLayout)
in LinkNavWithLayout (created by Context.Consumer)
in withRouter(LinkNavWithLayout) (created by Connect(withRouter(LinkNavWithLayout)))
in Connect(withRouter(LinkNavWithLayout)) (created by Context.Consumer)
in Route (created by App)
in Switch (created by App)
in App (created by MyApp)
in Container (created by MyApp)
in PersistGate (created by MyApp)
in Provider (created by MyApp)
in MyApp (created by AppWithReactRouter)
in Router (created by BrowserRouter)
in BrowserRouter (created by AppWithReactRouter)
in AppWithReactRouter (created by AppWithRedux)
in AppWithRedux
in Suspense (created by AppContainer)
in Container (created by AppContainer)
in AppContainer
Вот то, что я рендеринг,
По существу, если isLoggedIn истина, это делаетпункты меню с соответствующими пунктами, которые имеют отношение к входу в систему, и если isLoggedIn имеет значение false, элементы, которые не имеют значения, исчезают.
render() {
const { children, data, isLoggedIn } = this.props
const { sidebarOpened } = this.state
return (
<Responsive
as={Sidebar.Pushable}
getWidth={getWidth}
maxWidth={Responsive.onlyMobile.maxWidth}
>
<Sidebar
as={Menu}
animation='push'
inverted
onHide={this.handleSidebarHide}
vertical
visible={sidebarOpened}
>
{isLoggedIn ?
data.filter(function (nav) {
if (nav.name === "Login!") nav.name = "Logout!"
return (nav.name !== "Register")
})
.map(nav => {
return (
<Menu.Item
exact
key={nav.name}
as={NavLink}
to={nav.path}
name={nav.name}
onClick={this.handleSidebarHide}
>
</Menu.Item>
)
})
:
data.filter(function (nav) {
if (nav.name === "Logout!") nav.name = "Login!"
return (nav.name != "Profile") && (nav.name != "Dashboard")
})
.map(nav => {
return (
<Menu.Item
exact
key={nav.name}
as={NavLink}
to={nav.path}
name={nav.name}
onClick={this.handleSidebarHide}
>
</Menu.Item>
)
})}
</Sidebar>
<Sidebar.Pusher dimmed={sidebarOpened}>
<Segment
inverted
textAlign='center'
style={{ minHeight: 'auto', padding: '1em 0em' }}
vertical
>
<Container>
<Menu inverted pointing secondary size='large'>
<Menu.Item onClick={this.handleToggle}>
<Icon name='sidebar' />
</Menu.Item>
<Menu.Item position='right'>
<Button inverted>
{isLoggedIn
? <Link to="/" onClick={this.logOutuser}>Log out!</Link>
: <Link to="/login">Log in!</Link>
}
</Button>
{isLoggedIn || <Button inverted style={{ marginLeft: '0.5em' }}>
<Link to="/register"><span>Register!</span></Link>
</Button>}
</Menu.Item>
</Menu>
</Container>
</Segment>
{children}
</Sidebar.Pusher>
</Responsive>
);
}
Также важно отметить, что мне пришлось переключиться на React-Router , поскольку компонент Link из Next.js не работал с вышеупомянутым элементом меню из Semantic-React-UI. Заранее спасибо!