React+antdesign实现添加评论功能（底部附源码地址）

React结合antDesign组件库实现一个的评论功能案例，有疑问评论区交流

引入这些就不赘述了，直接说实现过程吧，这里的input部分和item是分开的两个组件，使用到的第三方的插件：

"styled-components": "^5.3.0",//css in js 
"moment": "^2.29.1", //处理时间(推荐使用)
"antd": "^4.15.6", //不多说
"@craco/craco": "^6.1.2",//React处理配置文件(可修改antd的主题)

接下来直接看代码：

app.jsx:

数据处理，及其两个组件的props传值取值，removeItem是用来删除的操作。

注意：修改state中的值需要注意，注意数据的不可变力量。

import React, { PureComponent } from 'react'
import { AppStyle } from './appstyle';
import CommitInput from './componet/CommitInput/CommitInput'
import CommitItem from './componet/CommitItem/CommitItem'
export default class app extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      content: []
    }
  }
  render() {
    return (
      <AppStyle>
        <div className='AppStyle'>
          <CommitItem giveDataToCommitItem={this.state.content}
            removeItem={(index) => this.removeItem(index)} />
          <CommitInput getInputContent={(content) => { this.getInputContent(content) }} />
        </div>
      </AppStyle>
    )
  }
  getInputContent(contenttt) {
    this.setState({
      content: [...this.state.content, contenttt]
    })
  }
  componentDidUpdate() {
  }
  removeItem(index) {
    let newcontent = [...this.state.content];
    newcontent.splice(index, 1);
    this.setState({
      content: newcontent
    })
  }
}

CommitItem.jsx

组件的使用可以对照官方文档。

import React, { PureComponent } from 'react'
import { Comment, Tooltip, Avatar } from 'antd';
import moment from 'moment'
import { DeleteOutlined } from "@ant-design/icons";
import { CommitItemStyle } from './style';
export default class CommitItem extends PureComponent {
  render() {
    let { giveDataToCommitItem } = this.props;
    return (
      <CommitItemStyle>
        <div className='CommitItemStyle_list'>
        {
          giveDataToCommitItem.map((item, index) => {
            return (
              <Comment
                actions={[
                  <span onClick={() => {
                    this.props.removeItem(index)
                  }}><DeleteOutlined /> 删除</span>
                ]}
                author={<a>{item.name}</a>}
                avatar={
                  <Avatar
                    src={item.img}
                    alt={item.name}
                  />
                }
                content={
                  <p>
                    {item.value}
                  </p>
                }
                datetime={
                  <Tooltip title={item.time}>
                    <span>{moment().fromNow()}</span>
                  </Tooltip>
                }
                key={item.time}
              />
            )
          })
        }
        </div>
      </CommitItemStyle>
    )
  }

}

…
…
…
…
…
实现效果：

源码地址：G站传送门

学习为主，欢迎交流哦