Как создать HTML элементов из объекта в машинописи с помощью реакции - PullRequest
Новая
       38

Как создать HTML элементов из объекта в машинописи с помощью реакции

0 голосов
/ 21 марта 2020

У меня есть тип, который я определил в своем собственном файле .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 Ответ

0 голосов
/ 21 марта 2020

Используя 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>
);
...