为什么 react 拒绝将 jsx 转换为 HTML 组件，只返回 [object Object]？

Question

请在下面的代码中找到// the console log I am talking about。 这个控制台日志返回string 所以不是我在这里传递对象。但即便如此，react 也无法识别 jsx 并在 HTML 中添加对象 Object。 我得到的输出是：

import React, { useEffect, useState } from "react";

function App() {
  const [file, setFile] = useState();
  useEffect(() => {
    setFile(
      JSON.parse(`{
        "short_name": "React App",
        "name": "Create React App Sample",
        "icons": [
          {
            "src": "favicon.ico",
            "sizes": "64x64 32x32 24x24 16x16",
            "type": "image/x-icon"
          },
          {
            "src": "logo192.png",
            "type": "image/png",
            "sizes": "192x192"
          },
          {
            "src": "logo512.png",
            "type": "image/png",
            "sizes": "512x512"
          }
        ],
        "start_url": ".",
        "display": "standalone",
        "theme_color": "#000000",
        "background_color": "#ffffff"
      }`)
    );
  }, []);
  return (
    <>
      {/* <import file component> */}

      <JsonViewer file={file} />
    </>
  );
}

function JsonViewer({ file }: any) {
  const [fileContent, setFileContent] = useState<any>();
  useEffect(() => {
    if (file) {
      setFileContent(getJsonData(file, ""));
    }
  }, [file]);
  function getJsonData(data: any, idToAppend: string) {
    let t: any = [];
    if (data.length) {
      console.log(data.length);
      for (let i in data) {
        let idToA = `${idToAppend}${i.toString()}`;
        t.push(getJsonData(data[i], idToA))
      }
    }
    else {
      Object.entries(data).forEach(([key, value], i) => {
        const idToA = `${idToAppend}${i.toString()}`;
        if (typeof value === "object") {
          let a: any = value
          t.push(
            <div key={i} id={idToA}>
              <button
                onClick={(e) => {
                  let ele = document.getElementById(idToA);
                  if (ele) {
                    ele.innerHTML += getJsonData(value, idToA);
                  }
                }}
              >
                {key}
              </button>
            </div>
          );
        }
        else {
          // the console log I am talking about
          console.log(typeof value);
          t.push(
            <div key={i}>
              <div
                id={idToA}
              >
                {key}:{value}
              </div>
            </div>
          );
        }
      }
      );
    }
    return t;
  }

  return (
    <div>
      {fileContent}
    </div>
  );
}

export default App;

Answer 1

您获取对象的原因是因为当前过程正在创建嵌套的t 列表。你可以在这里看到输出：https://codesandbox.io/s/youthful-sunset-ru8ic?file=/src/Old.tsx

---

另一种可行的方法：

import React from "react";

const DATA = {
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
};

interface theDat {
  data: {
    short_name: string;
    name: string;
    icons: Icons[];
    start_url: string;
    display: string;
    theme_color: string;
    background_color: string;
  };
};

type Icons = {
  src: string;
  sizes: string;
  type: string;
};

const App = () => {

  const JsonInterpreter: Function = ({data}: theDat) => {

    let elements = [];
    
    Object.keys(data).forEach((dat, i) => {

      let value = data[dat];

      console.log(`this: ${dat} ${typeof value}`)

      if (typeof value === 'string') {
        elements.push(
          <p key={i}>{dat} {value}</p>
        )
      } else if (typeof value === 'object') {

        elements.push(
          <p key={i}>{dat}</p>
        );

        console.log(value);

        let nested = [];

       (value as []).forEach((d, j) => {
          let keys = Object.keys(d);
          if (['src', 'type', 'sizes'].every(e => keys.includes(e))) { /* typeguard for icons */
            nested.push(
              <p key={`n-${j}`}>{JSON.stringify(d)}</p>
            );
          };
        })

        elements.push(...nested);

      };

    });

    return elements;

  };

  return (

    <>

      <JsonInterpreter data={DATA} />

    </>

  );

};

export default App;

工作代码沙盒：https://codesandbox.io/s/youthful-sunset-ru8ic?file=/src/App.tsx:0-1789