渲染中的条件语句

Question

我正在尝试为我正在处理的网站创建评论部分。提交评论表单（在 AfterCommentButtonClick 内）后，状态 formSubmitted 从 false 变为 true，这会触发 render 方法内的条件语句。这将调用一个子组件，该组件接收用户评论并对其进行一些样式设置。我遇到的问题是，我希望我的应用程序允许多个评论。有没有办法保存以前呈现的评论，然后像当前一样创建 <UserComment> 的新实例，在提交表单后旧的实例被简单地覆盖。我还需要在提交表单后重置 textInput 状态，以便为下一条评论重置表单。但是，如果不在 render 中输入 setState，我再次不确定如何执行此操作，这将导致无限循环

import React from 'react'
import UserComment from './UserComment'

class CommentSection extends React.Component {
    constructor(props){
        super(props)
        this.state = {selectedFile: this.props.selectedFile, textinput : '', formSubmitted:false}


    }

    onFormSubmit (event){
        event.preventDefault()
        this.setState({formSubmitted:true})

    }


    render(){

        //conditional render depending on if comment button has been clicked or not. props.selectedFile only
        //passed here from parent if user clicks comment button
        const file = this.props.selectedFile
        let messageToUser
        if (file !=null){
             messageToUser = <AfterCommentButtonClick 
                                selectedFile = {file}
                                onTextChange = {(e)=> this.setState({textinput: e.target.value})}
                                onFormSubmit = {(e)=>this.onFormSubmit(e)}
                            />
         }else {
          messageToUser = <BeforeCommentButtonClick />  
          } 

          return (
            <div>
                <div> {messageToUser}</div>
                <div className="ui container comments">
                {this.state.formSubmitted && 
                    <UserComment commentText = {this.state.textinput}/>
                     /*conditionally send text typed into comment bar if user submits form*/    

                }

                </div>
            </div>
            )
    }       

}

Answer 1

您可以添加另一个状态字段以将评论存储在数组中。因此，当您收到新评论时，您可以这样做：

this.setState({
    comments: [...this.state.comments, newComment]
});

并且在您的渲染方法中，您映射到该数组并为 this.state.comments

中的每个评论显示一个评论组件

this.state.comments.map(comment => <UserComment commentText = {comment}}/>);

Answer 2

创建一个功能组件来呈现您提交的所有评论。为此，您需要保持 'submitted comments' 数组处于状态，并且在提交新评论时，只需将新用户评论添加到已提交评论数组中。将提交的评论数组从状态传递到您的新功能组件。使用 array.map() 函数通过为数组中的每个项目渲染一个 <UserComment/> 来渲染提交组件的数组。

因此，在提交用户评论时，它只会添加到已提交的评论组件，UI 会重新呈现并更新您提交的评论中的新 UserComment。这应该是完全独立的逻辑。

即<CommentsSection/> 组件的渲染方法看起来像这样：

render() {
   return (<div>
      {this.props.submittedComments.map((comment) => (
         <UserComment author={comment.author} content={comment.content}></UserComment>))}
   </div>);
}

渲染中的条件语句

conditional statements inside render

javascript

state

render

reactjs