如何使用 React 从打字稿中的对象创建 HTML 元素

Question

我在自己的 .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>);

请注意，当我在网页上显示时，我需要访问字段名称及其值。

Answer 1

使用 Object.keys() you can iterate each key of your object with Array.map() 到 return 所需的 HTML 并使用 myObj[key] 语法显示每个对象键的值。

Working example: https://codesandbox.io/s/react-Whosebug-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, ":");
  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>
);

如何使用 React 从打字稿中的对象创建 HTML 元素

How to create HTML elements from an object in typescript using react

html

typescript

reactjs

react-tsx