html - 为什么 react 拒绝将 jsx 转换为 HTML 组件,只返回 [object Object]?
问题描述
请// 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;
解决方案
您获取对象的原因是因为当前过程正在创建嵌套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
推荐阅读
- node.js - 如何按客户最常用的方式过滤文档
- rust - 重新打开 AboutDialog 显示一个空白对话框
- swift - 当应用程序安装在设备上时如何在 iOS 中执行功能
- algorithm - 有向循环图如何具有“最远节点”?
- nix - 由于缺少 nixos 通道,nixos-rebuild 无法构建
- java - 当从同一个变量初始化一个新对象时,前一个对象是否会被删除?
- javascript - 单击时过滤具有多个条件的数组(复选框元素)
- css - 你如何让 CSS Isolation 在引用的项目上工作?
- ios - 无法将变量的值从一个类传递给Objective c中的另一个类
- python - QGraphicsscene.itemAt() 方法抛出错误