使用 React Quill 和 Firebase Firestore 的评论回复系统

Question

我正在用 React Quill 作为我的编辑器和 Firebase Firestore 制作一个评论系统。每条评论 post 都存储在 firestore 中。每个存储的评论都有一个回复按钮，点击后，编辑器应该会填充我要回复的评论内容。基本上我需要用存储在 firestore 数据库中的内容填充我的编辑器。这是我想要实现的手表的屏幕截图：

Comment reply

这是来自评论编辑器组件的一些代码

class NewComment extends Component {
constructor(props) {
super(props);

this.state = {
  comment: {
    commentID: "",
    content: "",
    createDate: new Date(),
    featureImage: "",
    isPublish: "True",
    createUserID: "",
  },
};
}
 ...
onChangeCommentContent = (value) => {
 this.setState({
  comment: {
    ...this.state.comment,
    content: value,
  },
});
};
...
render() {
 return (
  <Container>
    <Row>
      <Col xl={9} lg={8} md={8} sn={12}>
        <h2 className={classes.SectionTitle}>Comment</h2>

        <FormGroup>
          <ReactQuill
            ref={(el) => (this.quill = el)}
            value={this.state.comment.content}
            onChange={(e) => this.onChangeCommentContent(e)}
            theme="snow"
            modules={this.modules}
            formats={this.formats}
            placeholder={"Enter your comment"}
          />
        </FormGroup>
      </Col>...

回复按钮位于我呈现存储的评论的不同组件中。如果您需要组件的完整代码，请告诉我。

Answer 1

Here is a simple example on how to pass on information between two components via the parent component using function components:

// Index.js
const MyComponent = () => {
  const [replyValue, setReplyValue] = useState("");

  const onClick = (value) => {
    setReplyValue(value);
  };

  return (
    <>
      <Comment value="This is a reply" onClick={onClick} />
      <Comment value="This is another reply" onClick={onClick} />
      <CreateReply quoteValue={replyValue} />
    </>
  );
};

// Comment.js
export const Comment = ({ value, onClick }) => {
  return (
    <div className="comment" onClick={() => onClick(value)}>
      {value}
    </div>
  );
};

// CreateReply.js
export const CreateReply = ({ quoteValue = "" }) => {
  const [value, setValue] = useState("");

  useEffect(() => {
    setValue(quoteValue);
  }, [quoteValue]);

  const onValueUpdated = (newValue) => {
    if (newValue !== value) {
      setValue(newValue);
    }
  };

  return (
    <>
      <ReactQuill value={value} onChange={onValueUpdated} />
    </>
  );
};

Here is the same example using class components:

// Index.js
class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.onClick = this.onClick.bind(this);

    this.state = {
      replyValue: ""
    };
  }

  onClick = (value) => {
    this.setState({
      replyValue: value
    });
  };

  render() {
    return (
      <>
        <Comment value="This is a reply" onClick={this.onClick} />
        <Comment value="This is another reply" onClick={this.onClick} />
        <CreateReply quoteValue={this.state.replyValue} />
      </>
    );
  }
}

// Comment.js
export class Comment extends React.Component {
  render() {
    return (
      <div
        className="comment"
        onClick={() => this.props.onClick(this.props.value)}
      >
        {this.props.value}
      </div>
    );
  }
}

// CreateReply.js
export class CreateReply extends React.Component {
  constructor(props) {
    super(props);

    this.onValueUpdated = this.onValueUpdated.bind(this);

    this.state = {
      value: props.quoteValue
    };
  }

  componentDidUpdate(prevProps) {
    if (this.props.quoteValue !== prevProps.quoteValue) {
      this.setState({
        value: this.props.quoteValue
      });
    }
  }

  onValueUpdated = (newValue) => {
    if (newValue !== this.state.value) {
      this.setState({
        value: newValue
      });
    }
  };

  render() {
    return (
      <>
        <ReactQuill value={this.state.value} onChange={this.onValueUpdated} />
      </>
    );
  }
}

使用 React Quill 和 Firebase Firestore 的评论回复系统

Comment reply system with React Quill and Firebase Firestore

rte

firebase

reactjs

quill