如何使用 React 从 TypeScript 中的对象创建 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()，您可以使用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>

);