Skip to main content
Version: 3.x

RichText

Rich text.

Reference

Type

ComponentType<RichTextProps>

Examples

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

PropertyTypeDefaultRequiredDescription
nodesNodesNoThe node list/HTML string
space"ensp" | "emsp" | "nbsp"NoDisplays consecutive spaces

Property Support

PropertyWeChat Mini-ProgramH5React Native
RichTextProps.space✔️

TSpace

Valid values of space

ValueDescription
enspEn space
emspEm space
nbspThe size of the space is set according to the font setting

Text

text node

PropertyTypeDefaultDescriptionRemarks
type"text"Text type
textstring""Text stringsupport entities

HTMLElement

element node(defaulted)

The class and style properties are supported globally. The id property is not supported.

PropertyTypeRequiredDescriptionRemarks
type"node"NoHTML type
namestringYesTag nameSupports some trusted HTML nodes.
attrsObjectNoPropertySupports some trusted properties. The name complies with the Pascal naming convention.
childrenNodesNoChild node listThe structure of child nodes is the same as that of nodes.

Nodes

node type

Currently, two nodes are supported, which are distinguished according to the type: element node and text node. It is the element node by default. HTML nodes are displayed in the rich text area. Element node: type = node*

Type

(Text | HTMLElement)[] | string

API Support

APIWeChat Mini-ProgramBaidu Smart-ProgramAlipay Mini-ProgramByteDance Micro-AppH5React Native
RichText✔️✔️✔️✔️✔️✔️