javascript - 如何在 React 中正确切换元素(如果它在数组中)

Question

我这里有 CommentSection 组件

    export class CommentSection extends Component {

    <...> some stuff that is not related to question    

    render() {
        if (!this.state.data || !this.state.data.length)
            return null;     
        var comments = [];
        for (let i = 0; i < this.state.data.length; i++) {
            var item = this.state.data[i]; // single comment
            var commentReplies = this.pushReplies(item.id, i);                      
            if (item.replyToId == null) {
                comments.push( // pushing comment if it has replies
                    <React.Fragment key={'b' + i}>
                        <div className="comment">
                            <p className="comments_username">{item.userName}</p>
                            <p className="comments_body">{item.body}</p>
                            <p className="comments_date"> {item.publicationDate}</p>
                            <p className="reply">Reply</p>
                        </div>                        
                        <SmallCommentForm postId={this.state.id} replyToId={item.id} />

                        {commentReplies}

                    </React.Fragment>
                );
            } 

        }

        return (
            <React.Fragment>
                {comments}
            </React.Fragment >
        );
    }
}

我需要切换 <SmallCommentForm>组件，但我无法正确地看到我该怎么做。我应该以某种方式添加/删除 display:none来自 document.getElementById(replyToId) 的属性还是什么？

我见过的几乎所有解决方案都包含 if 语句，它决定是否呈现代码。但是在那种情况下我不能应用这种解决方案:所有评论只有一种状态，因为我使用的是 for () {}

是否有任何解决方案，还是我做错了？对不起我的英语，它不是我的主要语言。

Answer 1

我想你可以有另一个属性来切换 <SmallCommentForm />所以你的数据在 this.state 中的数组中并且您有另一个用于切换的属性并执行 { this.state.isOn && <SmallCommentForm />}