html列表中的多级javascript对象未按预期工作

所以我需要显示对象在html列表中的状态。 我有一个类似的目标：

    {
  "top": 123,
  "left": 456,
  "right": 789,
  "bottom": 100,
  "m1": 123,
  "m2": 456,
  "m3": 789,
  "m4": 100,
  "patterns": [1, 2, 3],
  "dimension": {
    "width": 123,
    "length": 456
  },
    }

我正在使用react，当我获取该对象时，我将其解析为以下函数：

  createHtmlList = (obj) => {
    let output = '';
    Object.keys(obj).forEach((k) => {
      if (typeof obj[k] === 'object' && obj[k] !== null) {
        output += `<li>${k}<ul>`;
        output += this.createHtmlList(obj[k]);
        output += '</ul></li>';
      } else {
        output += `<li>${k} : ${obj[k]}</li>`;
      }
    });
    this.setState({
      output,
    });
  }

预期输出（如果可能，更好的版本：）：

或

---

您不需要将jsx存储在状态中。简单地做这样的事情

  const createHtmlList = (obj) => {
    return Object.keys(obj).map((item) => (
      <li>
        {item} :
        {typeof obj[item] !== "object" ? (
          obj[item]
        ) : Array.isArray(obj[item]) ? (
          obj[item].join(", ")
        ) : (
          <ul>{createHtmlList(obj[item])}</ul>
        )}
      </li>
    ));
  };

const createHtmlList=（obj）=>{
返回Object.keys（obj.map）（（项）=>(

{项目}：
{对象的类型[项目]！==“对象”(
obj[项目]
)：Array.isArray（对象[项目]）(
obj[项目]。联接（“，”）
) : (
{createhtmlist（obj[item]）}
)}

));
};

然后像这样输出它

return <div>{createHtmlList(obj)}</div>

返回{createHtmlList（obj）}

您不需要将jsx存储在状态中。简单地做这样的事情

  const createHtmlList = (obj) => {
    return Object.keys(obj).map((item) => (
      <li>
        {item} :
        {typeof obj[item] !== "object" ? (
          obj[item]
        ) : Array.isArray(obj[item]) ? (
          obj[item].join(", ")
        ) : (
          <ul>{createHtmlList(obj[item])}</ul>
        )}
      </li>
    ));
  };

const createHtmlList=（obj）=>{
返回Object.keys（obj.map）（（项）=>(

{项目}：
{对象的类型[项目]！==“对象”(
obj[项目]
)：Array.isArray（对象[项目]）(
obj[项目]。联接（“，”）
) : (
{createhtmlist（obj[item]）}
)}

));
};

然后像这样输出它

return <div>{createHtmlList(obj)}</div>

返回{createHtmlList（obj）}

Array.isArray（）并以不同方式处理它ray.isArray（）并以不同方式处理它

    patterns: 1,2,3
    dimension
     width: 123
     lenght: 456
     top: 123
     left: 456
     right: 789
     bottom: 100
     m1: 123
     m2: 456
     m3 789
     m4: 100

  const createHtmlList = (obj) => {
    return Object.keys(obj).map((item) => (
      <li>
        {item} :
        {typeof obj[item] !== "object" ? (
          obj[item]
        ) : Array.isArray(obj[item]) ? (
          obj[item].join(", ")
        ) : (
          <ul>{createHtmlList(obj[item])}</ul>
        )}
      </li>
    ));
  };

return <div>{createHtmlList(obj)}</div>