如何使用 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>);