我正在学习 React.js。我大约 2 天前搜索了我的问题的解决方案,但我不知道问题是什么。
render() {
return (
<div>
{
this.state.menus.map((item_main, index_main) => {
return (<h1 key={item_main.main_name}>{item_main.main_name}</h1>);
var subs = this.state.menus[index_main].subs.map((item_sub, index_sub) => {
return(<h4 key={item_sub.sub_name}>{item_sub.sub_name}</h4>)
})
})
}
</div>
);
如果我将“return”替换为“console.log”,它在控制台中看起来不错,但在网络上不会出现。
最佳答案
代码中无法访问的方面部分来自这样一个事实,即一旦您 return
,那么它下面的行将不会执行。在这种情况下:
var subs = this.state.menus[index_main].subs.map((item_sub, index_sub) => {
return(<h4 key={item_sub.sub_name}>{item_sub.sub_name}</h4>)
})
永远不会与返回一起运行。这就是导致您的 no-unreachable
的原因要触发的 linter 错误。
从你的帖子来看,你想要的行为有点模棱两可,但我最好的猜测是你想要一个 <h1>
对于每个项目,后跟 <h4>
对于您的每个子菜单项。在这种情况下,您的代码应如下所示:
render() {
return (
<div>
{
this.state.menus.map((item_main, index_main) => {
var subs = this.state.menus[index_main].subs.map((item_sub, index_sub) => {
return(<h4 key={item_sub.sub_name}>{item_sub.sub_name}</h4>)
});
return (
<div>
<h1 key={item_main.main_name}>{item_main.main_name}</h1>
{subs}
</div>
);
})
}
</div>
);
您还可以使用 <Fragment>
作为外包装,但为了简单起见,我没有在此处包含它。
关于reactjs - React JS Unreachable 代码 no-unreachable,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50379302/