React combines the antDesign component library to implement a comment function example

The input part and item part are two separate components, which are used by third-party plug-ins:

"Styled - components", "^ 5.3.0", / / CSS in js "moment" : "^ 2.29.1", / / processing time (recommended) "antd" : "^ 4.15.6", / / not say "@ craco/craco" : "^6.1.2",//React handles configuration files (antD theme can be modified)Copy the code

Let’s get straight to the code:

app.jsx:

Data processing, and props for its two components. RemoveItem is the operation to delete.

Note: Changing the value in state requires care, and attention to the immutable power of the data.

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
    })
  }
}

Copy the code

CommitItem.jsx

The use of components can be referred to the official documentation.

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 />delete</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>)}}Copy the code

. . . . .Effect: Source code address:G-station portal

Study first, welcome to exchange oh