Стилизация вывода объекта в Typescript реагирует - PullRequest
Новая
       5

Стилизация вывода объекта в Typescript реагирует

1 голос
/ 09 марта 2020

У меня есть вывод объекта, который выглядит следующим образом: 

name: "James Charles"
address: "<font face="Arial" size="2">10109 New York. Ste. C, New York NY</font>"
phone: "784-247-7926"
email: "jamescharles@yahoo.com"

Я делаю это в моем render(): 

<ul>
    {(Object as any).entries(this.state.DocList).map((object, i) => <li>{object}</li>)}
</ul>

Тем не менее, вывод отображает что-то вроде this: 

nameJames Charles
address<font face="Arial" size="2">10109 New York. Ste. C, New York NY</font>
phone784-247-7926
emailjamescharles@yahoo.com

Я пытаюсь стилизовать вывод, чтобы добавить, например, пробел между ключом и значением, точку с запятой, может быть, класс span, чтобы я мог выделять поля ключа жирным шрифтом.

Как я могу получить больше контроля над выходом? И как лучше всего убрать html из поля адреса, чтобы оно не отображалось в адресе?

Так что мой вывод выглядит примерно так:

  • Имя: Джеймс Чарльз
  • Адрес: 10109 Нью-Йорк. Ste. C, Нью-Йорк Нью-Йорк
  • Телефон: 784-247-7926
  • Электронная почта: jamescharles@yahoo.com

1 Ответ

1 голос
/ 09 марта 2020

Перво-наперво: чтобы выделить адрес, которому нужно регулярное выражение, попробуйте: (?<=>)[a-zA-Z ,.0-9]*(?=<) (если это не работает в вашем браузере или среде, попробуйте опустить положительный взгляд в начале (?<=>))

Далее: при использовании Object.entries возвращаемое значение будет иметь формат [key, value], поэтому вместо того, чтобы сказать это: 

<ul>
    {(Object as any).entries(this.state.DocList).map((object, i) => <li>{object}</li>)}
</ul>

Попробуйте это: 

<ul>
    {(Object as any).entries(this.state.DocList).map(([key, value], i) => 
    <li>
        <span>{key}: </span><span>{value}</span>
    </li>)}
</ul>

Разница здесь, в обратном вызове map, вы уничтожаете аргументы (key, and value) из массива - это полезно, так что вы можете использовать их независимо.

...