Version: 下个版本

RichText

富文本

参考文档

类型#

ComponentType<RichTextProps>

示例代码#

class App extends Components {
state = {
nodes: [{
name: 'div',
attrs: {
class: 'div_class',
style: 'line-height: 60px; color: red;'
},
children: [{
type: 'text',
text: 'Hello World!'
}]
}]
}
render () {
return (
<RichText nodes={this.state.nodes} />
)
}
}

RichTextProps#

参数类型必填说明
nodesNodes节点列表/ HTML String
space"ensp" | "emsp" | "nbsp"显示连续空格

API 支持度#

API微信小程序H5React Native
RichTextProps.space✔️

TSpace#

space 的合法值

参数说明
ensp中文字符空格一半大小
emsp中文字符空格大小
nbsp根据字体设置的空格大小

Text#

文本节点

参数类型默认值说明备注
type"text"文本类型
textstring""文本字符串支持 entities

HTMLElement#

元素节点,默认为元素节点 全局支持class和style属性,不支持 id 属性。

参数类型必填说明备注
type"node"HTML 类型
namestring标签名支持部分受信任的 HTML 节点
attrsObject属性支持部分受信任的属性,遵循 Pascal 命名法
childrenNodes子节点列表结构和 nodes 一致

Nodes#

节点类型

现支持两种节点,通过type来区分,分别是元素节点和文本节点,默认是元素节点,在富文本区域里显示的HTML节点 元素节点:type = node*

类型#

(Text | HTMLElement)[] | string

API 支持度#

API微信小程序百度小程序支付宝小程序字节跳动小程序H5React Native
RichText✔️✔️✔️✔️✔️✔️