reactjs - 具有嵌套无序列表的反应订单列表在 Firefox 中的错误排序

Question

我对Firefox中列表项的排序有问题，下面是代码：

<ol>
  {
   Object.keys(rules).map((key) => {
   if (typeof rules[key] === 'string') {
      return <li key={key}>{rules[key]}</li>
    } else if (typeof rules[key] === 'object') {
       const nested = rules[key].subList
       return (
         <ul key={key}>
         {
           Object.keys(nested).map((key) => {
            return <li key={key}>{nested[key]}</li>
           })
         }
         </ul>
       )
      }
     })
   }
</ol>

代码的输出是

 1. first
 2. second:
  . option
  . another option
 5. third
 6. fourth

但所需的输出是：

 1. first
 2. second:
   . option
   . another option
 3. third
 4. fourth

我知道问题是无序列表应该嵌套在第二个列表项下，但是有没有办法简单地修改当前代码来达到预期的结果？

输入json是：

"rules": {
  "list": [
    "first",
    "second:",
    {
      "subList": [
        "option",
        "another option"
      ]
    },
    "third",
    "fourth"
  ]
}

标签： reactjslistfirefox

Answer 1

好的，这是对我有用的解决方法：

首先，我必须稍微改变一下 JSON 的结构，如下所示：

"rules": {
  "list": [
    "first",
    {
      "second": [
        "option",
        "another option"
      ]
    },
    "third",
    "fourth"
  ]
}

然后对代码进行一些修改

<ol>
  {
   Object.keys(rules).map(key => {
     if (typeof rules[key] === 'object') {
        const nested = rules[key]
        return Object.keys(nested).map(mkey => {
          return <li key={key}>{mkey}:<ul>
            {
              Object.keys(nested[mkey]).map(nkey => {
                return <li key={nkey}>{nested[mkey][nkey]}</li>
              })
            }
          </ul></li>
        })
      } else {
        return <li key={key}>{rules[key]}</li>
      }
    })
   }
</ol>