获取递归函数React.js/JavaScript的深度

qyyhg6bp 于 2022-10-15 发布在 React

关注(0)|答案(2)|浏览(166)

我正在尝试解决一个JavaScript/React.js练习来练习递归函数，在该练习中，您有一个输入对象(可以有多个深度级别)，并且您希望输出一个包含如下对象内容的“树”：

//Input object
const input = {
  key1: {
    key11: 'v11',
  },    
  key2: {
    key21: {
      key211: 'v211',
    },
  },
  key3: 'v3',
}

/* Desired output:
key1:
--key11: v11
key2:
--key21:
----key211: v211
key3: v3

* /

我已经成功地开发了进行递归调用的App.jsx组件：

class App extends React.Component {  
    renderObject(input, level=0){
    return (Object.entries(input).map((item, index) => {
      if(typeof item[1] === "string"){
        let object = <div key={`${item[0]}-level-${level}`}><span>{"--".repeat(level)}</span>{item[0]}: {item[1]}</div>;
        level = 0;
        return object;
      } else {
        let object = <div key={`${item[0]}-level-${level}`}><span>{"--".repeat(level)}</span>{item[0]}: { this.renderObject(item[1], ++level)}</div>
        return (object)
      }
    }))
  }

  render() {
    return (
      <div>
            {this.renderObject(input)}
      </div>
    )
  }
}

ReactDOM.render(<App />, document.querySelector("#app"))

我面临的问题是，我实现的level没有显示出真正的深度，因为它也在第一个级别的每次迭代中递增(当它应该保持为0的时候)。

/* Obtained output: 
key1:
--key11: v11
--key2:
----key21:
------key211: v211
----key3: v3

* /

我怎么能解决这个问题呢？

reactjs

来源：https://stackoverflow.com/questions/73941468/getting-depth-of-recursive-function-react-js-javascript

2条答案

按热度按时间

du7egjpx1#

将我的注解转换为答案时，问题与在递归函数体中使用++level和level = 0来改变level的值有关。查看打印的结果，目标是每个级别具有相同的缩进，因此使用++level，相同级别的循环中的未来兄弟姐妹将以越来越大的距离缩进。level = 0可能试图纠正这个问题，但它不起作用，因为一旦开始递归，Level就不应该为0。
解决方案是在函数体期间将level有效地视为不可变的，然后使用level + 1作为参数将子递归调用设置为适当的级别。
代码如下：

class App extends React.Component {
  renderObject(o, level = 0) {
    return Object.entries(o).map(([k, v]) => (
      <div key={[k, v, level].join("-")}>
        <span>{"--".repeat(level)}</span>
        {k}:{" "}
        {typeof v === "object"
          ? this.renderObject(v, level + 1)
          : v}
      </div>
    ));
  }

  render() {
    return <div>{this.renderObject(this.props.tree)}</div>;
  }
}

const tree = {
  key1: {
    key11: "v11",
  },
  key2: {
    key21: {
      key211: "v211",
    },
  },
  key3: "v3",
};

ReactDOM.createRoot(document.querySelector("#app"))
  .render(<App tree={tree} />);


# app {

  font-family: monospace;
}

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div id="app"></div>

赞(0）回复(0）举报 2022-10-15

j2cgzkjk2#

执行level + 1而不是++level

赞(0）回复(0）举报 2022-10-15