时间戳

首页 > 解决方案 > Typescript中对象的样式输出反应

javascript - Typescript中对象的样式输出反应

问题描述

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

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 以使其不在地址中显示的最佳方法是什么？

所以我的输出看起来类似于：

标签： javascriptarraysreactjstypescriptreact-native

解决方案

首先要做的事情：隔离您需要正则表达式的地址，尝试：（(?<=>)[a-zA-Z ,.0-9]*(?=<)如果这在您的浏览器或环境中不起作用，请尝试在乞求时省略积极的lookbehind (?<=>)）

下一步：当使用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从数组中解构参数 ( ) —— 这是有益的，因此您可以独立使用它们。

推荐阅读