代码之家 › 专栏 › 技术社区 › merry-go-round

如果满足条件,如何最终调用递归调用?

data-structures algorithm typescript reactjs javascript

merry-go-round · 技术社区 · 4 年前

我有一个名为option的嵌套对象。它嵌套了(可能是无限的)对象,称为 childOptions 钥匙。

option = {
  name: 'o1', label: 'o1', childOptions: [
    { name: 'o4', label: 'o4', childOptions: [
      {name: 'o5', label: 'o5',
    ]},
    { name: 'o2', label: 'o3'},
    { name: 'o3', label: 'o3'}
  ]
}

这是我基于此渲染JSX的渲染函数。

  function renderOption(option): JSX.Element {
    if (option.childOptions) {
      return (
        <li
          key={option.name}
        >
          <span>
            {option.label}
          </span>
          <ul>
            {option.childOptions.map(renderOption} << recursive call!
          </ul>
        </li>
      );
    }

我嵌套了 option 进入的物体 renderOption

这是当前输出( 正确但不是我想要的 )

<li>
  <span>o1</span>
  <ul>
    <li>
      <span>o4</span>
      <ul>
        <li><span>o5</span></li>
      <ul>
    </li>
    <li><span>o2</span></li>
    <li><span>o3</span></li>
  </ul>    
</li>

因为我们在o1之后显示o2和o5,所以用户会感到困惑。 这就是我需要的

<li>
  <span>o1</span>
  <ul>
    <li><span>o2</span></li>
    <li><span>o3</span></li>
    <li>
      <span>o4</span>
      <ul>
        <li><span>o5</span></li>
      <ul>
    <li>
  </ul>    
</li>

我认为这可能是不可能的。如果递归调用满足条件,我们最终如何调用它?

如果可以的话,我仍然想保留递归调用。

2 回复 | 直到 4 年前

Alexander Belokon 4 年前

排序 childOptions 按名称在对象中:

  function renderOption(option): JSX.Element {
    if (option.childOptions) {

      option.childOptions.sort((a, b) => a.name.localeCompare(b.name));

      return (
        <li
          key={option.name}
        >
          <span>
            {option.label}
          </span>
          <ul>
            {option.childOptions.map(renderOption} << recursive call!
          </ul>
        </li>
      );
    }

adiga 4 年前

你可以退货 ul 对于一系列选项。获取选项数组作为函数组件的道具。传递首字母 option 对象作为数组,使其统一,更容易进行递归调用

这是一个可运行的代码片段:

const option={name:"o1",label:"o1",childOptions:[{name:"o4",label:"o4",childOptions:[{name:"o5",label:"o5"}]},{name:"o2",label:"o2"},{name:"o3",label:"o3"}]};

function Display({ options }) {
  return (
    <ul>
      {options.map(c => (
        <li key={c.name}>
          <span>{c.label}</span>
          {c.childOptions && <Display options={c.childOptions} />}
        </li>
      ))}
    </ul>
  );
}

ReactDOM.render(
  <Display options={[option]} />, 
  document.getElementById("root")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>