我有一個(gè)在自己的 .ts 文件中定義的類型export class FakeType { value:{ name: string, id: number }, x: number }我在 .tsx 文件中有一個(gè)該對(duì)象的實(shí)例let myObj: FakeType;myObj = { value:{ name: "Foo", id: 99 }, x: 5}如何以編程方式創(chuàng)建與每個(gè)字段對(duì)應(yīng)的 html 元素？FakeType我可以按如下方式手動(dòng)創(chuàng)建所需的輸出，但如果有數(shù)百個(gè)字段，這將不起作用return ( <div>Value: {myObj.value}</div> <div>x: {myObj.x}</div>);請(qǐng)注意，當(dāng)我在網(wǎng)頁(yè)上顯示字段名稱及其值時(shí)，我需要訪問(wèn)該字段名稱及其值。
1 回答
慕沐林林
TA貢獻(xiàn)2016條經(jīng)驗(yàn) 獲得超9個(gè)贊
使用Object.keys()，您可以使用Array.map()迭代對(duì)象的每個(gè)鍵，以返回所需的 HTML 并使用語(yǔ)法顯示每個(gè)對(duì)象鍵的值myObj[key]。
工作示例：https ://codesandbox.io/s/react-stackoverflow-60783297-ozjeu
請(qǐng)參閱下面代碼中的注釋以獲取解釋...
// Your object.
const myObj: FakeType = {
? value: {
? ? name: "Foo",
? ? id: 99
? },
? x: 5
};
// Function to get value of an object with key name and unquote value object props.
// Typing `obj: any` is necessary to avoid TypeScript to complain
// about the type of the key value you're trying to retrieve.
const getValue = (obj: any, key: string) => {
? const value = obj[key];
? const stringify = JSON.stringify(value);
? const unquoted = stringify.replace(/"([^"]+)":/g, "$1:");
? return unquoted;
};
// Loop through `myObj` keys and display its value
// using the `getValue()` function implemented above.
return (
? <React.Fragment>
? ? {Object.keys(myObj).map(key => (
? ? ? <div>
? ? ? ? {key}: {getValue(myObj, key)}
? ? ? </div>
? ? ))}
? </React.Fragment>
);
- 1 回答
- 0 關(guān)注
- 123 瀏覽
添加回答
舉報(bào)
0/150
提交
取消