Javascript render中的条件语句

我正在尝试为我正在工作的网站创建一个评论区。提交注释表单（在

AfterCommentButtonClick

）后，状态

formSubmitted

将从

false

更改为

true

，从而在呈现方法内触发条件语句。这将调用一个子组件，该组件接收用户注释并对其进行一些样式设置。我的问题是，我希望我的应用程序允许多条评论。有没有办法保存以前呈现的注释，然后像当前一样创建一个新的

实例，在提交表单之后，旧的实例将被简单地覆盖。我还需要在提交表单后重置

textInput

状态，以便为下一条评论重置表单。但是，如果不在渲染内部输入

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

}

从“React”导入React
从“./UserComment”导入UserComment
类CommentSection扩展了React.Component{
建造师（道具）{
超级（道具）
this.state={selectedFile:this.props.selectedFile，textinput:''，formSubmitted:false}
}
onFormSubmit（事件）{
event.preventDefault（）
this.setState（{formSubmitted:true}）
}
render（）{
//条件呈现取决于是否单击了注释按钮。仅限props.selectedFile
//如果用户单击“注释”按钮，则从父级传递到此处
const file=this.props.selectedFile
让留言者
如果（文件！=null）{
messageToUser=this.setState（{textinput:e.target.value}）}
onFormSubmit={（e）=>this.onFormSubmit（e）}
/>
}否则{
messageToUser=
} 
返回(
{messageToUser}
{this.state.formSubmitted&&
/*如果用户提交表单*/
}
)
}       
}

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

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

在渲染方法中，映射到该数组，并为this.state.comments中的每个注释显示单个注释组件

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

this.state.comments.map（comment=>）；

创建一个功能组件来呈现您提交的所有评论。要做到这一点，您需要保持一个“提交的评论”数组处于状态，并且在提交新评论时，只需将新用户评论添加到提交的评论数组中。将提交的注释数组从状态传递到新的功能组件。使用

array.map（）

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

i、 e.
组件的渲染方法如下所示：

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

render（）{
返回(
{this.props.submittedComments.map（（注释）=>(
))}
);
}
您可以将提交的评论数组保留在应用程序的状态中。在render函数中，您可以使用
.map
迭代数组，并为每个数组元素（注释）呈现
。您需要将所有状态逻辑与呈现完全分离。在应用程序/a组件中发生了两件不同的事情：a）用户交互更改状态--b）render（）将状态转换为HTML。a） 和b）永远不要混合。对于渲染，没有“之后”或“之前”。它必须处理所有可能的应用程序状态，并且应该以React可以在任何时间点调用的方式编写。