Question

我对reactjs很新，所以我认为在函数中使用react.render可以让我创建多个不同的组件。但它始终显示我使用该函数创建的最后一个组件。我想它会覆盖以前的组件。

function renderComment (commentInfo, src, username, commentText, replyText){
    React.render(<Comment commentInfo={commentInfo} src={src} username={username} commentText={commentText} replyText={replyText} />, document.getElementById('comments'));
}

我该怎样防止这种情况？我想每次添加一个组件而不是覆盖它。

Answer 1

不应该这样做。而是创建一个顶级组件并将其呈现到页面上。将您的评论存储为顶级组件状态中的对象集合，并将其呈现在“渲染”状态中。方法：

React.render(<CommentsList />, document.getElementById('comments'));

//...

var CommentsList = react.createClass({
    onAddComment: function() {
        var comments = this.state.comments.slice();
        var newComment = /* create your new comment here somehow */;
        comments.push(newComment);
        this.setState({
            comments: comments
        });
    },
    render: function() {
        var comments = this.state.comments.map(function(comment) {
                            return <Comment commentInfo={comment.commentInfo} src={comment.src} username={comment.username} commentText={comment.commentText} replyText={comment.replyText} />
                        }, this);

        return (
            <div>
                {comments}
                <input type="button" value="Add comment" onClick={this.onAddComment} />
            </div>
        );
    }
});

在函数内使用reactjs渲染

1 个答案: