Question

有人可以告诉我如何在循环中发送函数吗？如果我直接将其发送到循环中，则会出错。无论如何有循环发送函数并从函数中调用它的方法

我有CommentListItem.js，在其中我调用SubCommentListItem

<SubCommentListItem 
                            key={subcomment.id} 
                            data={subcomment} 
                            parentid={commentID} 
                            updateComment={(comment) => this.updateComment()}
                            user={user} postid={postid} 
                            />

并在SubCommentListItem中调用表单组件

            {this.state.showForm ? (<CommentForm updateComment={this.updateComment} class={'subCommentFormBox'} parentid={this.state.parentid} postid={postid} user={user} />):(<div></div>)}

这是updateComment函数，但不是CommentListITem的更新道具

updateComment(comment) {
        this.setState({showForm:false})
        this.props.updateComment(comment)
    }

Answer 1

您将需要对代码进行一些更改。

首先，更新功能。让我们将其设置为箭头函数，这样就不必bind了：

updateComment = comment => {
    this.setState({ showForm:false })
    this.props.updateComment(comment)
}

现在只需在道具中发送对它的引用：

<SubCommentListItem
    key={subcomment.id}
    data={subcomment}
    parentid={commentID}
    updateComment={props.updateComment}
    user={user} postid={postid}
/>

这是在SubCommentListItem内的调用方式：

this.props.updateComment(yourComment)

此语法与其父组件中的语法相同

此外，以下代码：

{this.state.showForm ? (<CommentForm updateComment={this.updateComment} class={'subCommentFormBox'} parentid={this.state.parentid} postid={postid} user={user} />):(<div></div>)}

可以缩写为：

{this.state.showForm && <CommentForm updateComment={this.updateComment} class='subCommentFormBox' parentid={this.state.parentid} postid={postid} user={user} />}

我建议在React中使用className而不是class

Answer 2

尝试一下

{this.state.subcomments.map(function (subcomment, i) {
      return (
              <SubCommentListItem key={subcomment.id} 
                subcomment= {this.state.subcomments} 
                data={subcomment} parentid={commentID} 
                user={user} postid={postid}
                yourfunctionname={() => this.props.yourfunction()}
               />
              );
 })}

ReactJs：如何在循环中发送函数作为prop

2 个答案: