Typescript中对象的样式输出反应

Question

我有一个如下所示的对象输出：

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>

但是，输出显示如下：

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

我正在尝试对输出进行样式化，例如在键和值之间添加一个空格、一个分号，也许是一个跨度类，这样我就可以加粗键字段。

如何更好地控制输出？从地址字段中去除 html 以使其不在地址中显示的最佳方法是什么？

所以我的输出看起来像这样：

• 姓名：詹姆斯·查尔斯
• 地址： 10109 纽约。圣。 C，纽约纽约
• 电话： 784-247-7926
• 电子邮件： jamescharles@yahoo.com

Answer 1

首先要做的事情：隔离您需要正则表达式的地址，尝试：(?<=>)[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) —— 这是有益的，因此您可以独立使用它们。