Question

我希望一个接一个地发布评论，但不确定如何实施。目前，新评论正在取代旧评论。阅读一些帖子后，我认为this.props.children可能是答案，但仍然有些困惑，所以请让我知道实现我想要的最佳方法。谢谢。

Comment.js：

import React from 'react';
import { Display } from './Display';

export default class Comment extends React.Component {
    constructor(props) {
      super(props);
      this.state = { buttonClicked: false, count: 0 };
      this.handleClick = this.handleClick.bind(this);
    }


    handleClick() {
      this.setState({ buttonClicked: true , count : this.state.count + 1 });
      console.log('Button clicked');
    }

    render() {
      const comment_form =(
        <div className="posts" >
           <input type="text" id="comment-box" name="comment" placeholder="Say something nice." />
           <button className="submit-button" type="button" onClick={this.handleClick}>Comment</button>
        </div>
      );
      
      if (this.state.buttonClicked) {
        return (
          <div>
            {comment_form}
            <Display commentNumber={this.state.count} /> 
          </div>
        );
      } else {
        return (<div> {comment_form} </div>);
        } 
    }
}

Display.js：

import React from 'react';
import './App.css';

export class Display extends React.Component {

  constructor(props){
    super(props);
  }

  render() {
    console.log('display rendered');
    const comments = (
      <div className="display-comments">
        <p>Comment {this.props.commentNumber} :{ document.getElementById('comment-box').value }</p>
      </div>
    );
 
    return (
     <div>
       {comments}
     </div>
    );
  }
}

Answer 1

使用map函数动态渲染元素。链接：https://reactjs.org/docs/lists-and-keys.html

重新渲染时再次反应创建元素

1 个答案: