一个小练习-----评论（对antdesign的使用）

最新推荐文章于 2022-12-28 14:54:05 发布

gercke

最新推荐文章于 2022-12-28 14:54:05 发布

阅读量465

点赞数 1

分类专栏： react

本文链接：https://blog.csdn.net/gercke/article/details/109522707

版权

本文介绍了如何利用antdesign库创建一个简单的评论功能，包括添加、删除评论以及时间展示。涉及组件有Input、Button和Moment库，以及Comment、Avatar和Tooltip。

摘要由CSDN通过智能技术生成

antdesign库的简单使用

实现如下的栗子：可以添加评论，进行评论的删除，观察到时间等
在这里插入图片描述
点击删除第二个之后

文件的路径如下所示

在这里插入图片描述

index.js文件

import React from 'react';
import ReactDOM from 'react-dom';

import 'moment/locale/zh-hk';
import 'antd/dist/antd.css';

import App from './comment/App';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

app.js

import React, {
    PureComponent } from 'react';

import CommentInput from './components/CommentInput';
import CommentItem from './components/CommentItem';

export default class App extends PureComponent {
   
  constructor(props) {
   
    super(props);

    this.state = {
   
      commentList: []
    }
  }

  render() {
   
    return (
      <div style={
   {
   width: "500px", padding: "20px"}}>
        {