Javascript 如果满足条件，最后如何调用递归调用？

我有一个名为option的嵌套对象。它具有嵌套（可能无限）对象，称为

childOptions

key

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

因为我们在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>

o1

氧气
臭氧

o4

o5

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

• 如果可以的话，我仍然希望保留递归调用

---

按名称对对象中的

子选项进行排序：

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

函数渲染（选项）：JSX.Element{
if（option.childOptions）{
option.childOptions.sort（（a，b）=>a.name.localeCompare（b.name））；
返回(

{option.label}

{option.childOptions.map（renderOption}您可以为选项数组返回一个
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”}；
函数显示（{options}）{
返回(

{options.map（c=>(

{c.label}
{c.childOptions&&}

))}

);
}
ReactDOM.render(
, 
document.getElementById（“根”）
)；

在
选项中没有
o2
对象您共享的输出与输入不一致。您的代码中有一个不平衡的括号。抱歉，伙计们；编辑…它是固定的；抱歉。我想在您的第一个块中cping和粘贴平衡大括号时，它被弄乱了。请…花时间发布正确的代码。holly c天才
  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>
      );
    }