如何在功能组件内部执行if和else逻辑。例如
const FunctionA = ({ nodes, onOpen}) => {
nodes.map((item, ind) => (
if(item.nodes.length===0) {
return (<div>{item.name}</div>)
}
else
return (
<FunctionB
name={item.name}
nodes={item.nodes}
/>
);
}
不确定这是否有意义。函数B渲染节点。并再次调用功能A创建基于目录结构的嵌套sidenav。我想检查它是否是文件,因此具有空节点的属性。或者,如果它是目录并且具有进一步的嵌套。如果有进一步的嵌套。然后调用函数B。重复。当我实际尝试上面提到的内容时。我得到的错误是什么也没有退还。
答案 0 :(得分:0)
您没有从FunctionA
返回任何信息,并且不能在没有函数主体的箭头函数中使用if / else语句。
如果为arrow函数赋予主体,则将所有内容包装在一个最顶部的元素中,例如React.Fragment
并将其返回,它将起作用。
const FunctionA = ({ nodes, onOpen }) => {
return (
<React.Fragment>
{nodes.map((item, ind) => {
if (item.nodes.length === 0) {
return <div>{item.name}</div>;
} else {
return <FunctionB name={item.name} nodes={item.nodes} />;
}
})}
</React.Fragment>
);
};