亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何使用 React 從 TypeScript 中的對象創建 HTML 元素

如何使用 React 從 TypeScript 中的對象創建 HTML 元素

蕪湖不蕪 2023-09-25 16:46:13
我有一個在自己的 .ts 文件中定義的類型export class FakeType  {    value:{        name: string,        id: number    },    x: number }我在 .tsx 文件中有一個該對象的實例let myObj: FakeType;myObj = {    value:{        name: "Foo",        id: 99    },    x: 5}如何以編程方式創建與每個字段對應的 html 元素?FakeType我可以按如下方式手動創建所需的輸出,但如果有數百個字段,這將不起作用return (    <div>Value: {myObj.value}</div>    <div>x: {myObj.x}</div>);請注意,當我在網頁上顯示字段名稱及其值時,我需要訪問該字段名稱及其值。
查看完整描述

1 回答

?
慕沐林林

TA貢獻2016條經驗 獲得超9個贊

使用Object.keys(),您可以使用Array.map()迭代對象的每個鍵,以返回所需的 HTML 并使用語法顯示每個對象鍵的值myObj[key]。

工作示例:https ://codesandbox.io/s/react-stackoverflow-60783297-ozjeu

請參閱下面代碼中的注釋以獲取解釋...

// 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>

);


查看完整回答
反對 回復 2023-09-25
  • 1 回答
  • 0 關注
  • 110 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號