我正在尝试将导航栏构建为仪表板页面的一部分。仪表板按预期运行,直到我尝试通过导入和调用函数来包含导航栏。我知道包含函数调用时会出现错误,但不确定我做错了什么。
导航栏代码:
imports ...
export const NavItems = () => (
<div>
<ListItem button>
<ListItemIcon>
<DashboardIcon />
</ListItemIcon>
<ListItemText primary="Dashboard" />
</ListItem>
...
</div>
)
仪表板代码:
import React from 'react';
import List from '@material-ui/core/List'
import {NavItems} from './NavBar'
export default function App() {
return (
<div class="grid-container">
...
<aside class="sidenav">
<List>
<NavItems />
</List>
</aside>
...
</div>
);
}
我希望导航栏包含在站点的左侧面板中,但却收到以下错误:“无效的 Hook 调用。 Hook 只能在功能组件的主体内部调用。这可能发生在一个原因如下:...”
最佳答案
你忘了通过设置箭头函数让它成为一个函数组件。
export const NavItems = () => (
<div>
<ListItem button>
<ListItemIcon>
<DashboardIcon />
</ListItemIcon>
<ListItemText primary="Dashboard" />
</ListItem>
...
</div>
)
或者使用函数声明:
export function NavItems() {
return (
<div>
<ListItem button>
<ListItemIcon>
<DashboardIcon />
</ListItemIcon>
<ListItemText primary="Dashboard" />
</ListItem>
...
</div>
)
}
关于javascript - 为什么使用导入的函数会导致无效的钩子(Hook)错误?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56768242/