在功能组件内的逻辑是否调用另一个函数

时间:2018-11-15 17:02:46

标签: javascript reactjs recursion

如何在功能组件内部执行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。重复。当我实际尝试上面提到的内容时。我得到的错误是什么也没有退还。

1 个答案:

答案 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>
  );
};