Comment
Display a comment.
Install
npm install @arco-design/web-react@2.66.18
Import @arco-design/web-react/dist/css/arco.css at the entry and set the locale with ConfigProvider. React 19 projects must also import @arco-design/web-react/es/_util/react-19-adapter first, or imperative APIs such as Message and Modal cannot render.
Examples
- Basic
- Alignment: Alignment of datetime and actions.
- Nested comments
- Usage with List: Display the comments list with List component.
- Reply editor
Examples come from the official Arco Design repository (MIT) at the commit published as npm 2.66.18. Some use online images or upload endpoints; network requests are disabled in previews.
API
Comment
| Property | Description | Type | DefaultValue |
|---|---|---|---|
| align | Alignment of datetime and actions|`"left" \ | "right" \ | { datetime?: "left" \ |
| actions | List of action items rendered below the comment content | ReactNode | - |
| author | Display as the comment author | ReactNode | - |
| avatar | Display as the comment avatar | ReactNode | - |
| content | The content of the comment | ReactNode | - |
| datetime | Display as the comment datetime | ReactNode | - |
| className | Additional css class | string | string[] | - |
| style | Additional style | CSSProperties | - |