Question

我有一个简单的函数，它接受无数个字符串，并呈现Comment组件。但是，此处仅呈现最后一个组件。这是功能：

function renderComments(...comments) {
    for(let i = 0; i<comments.length; i++) {
        ReactDOM.render(<Comment/>, document.getElementById('comments')).setState({name: comments[i]});
    }
}

这里是评论组件：

class Comment extends React.Component {
    constructor() {
        super();
        this.state = {
            name: 'default'
        };
    }
    render() {
        return(
            <div> 

            {this.state.name}.

            </div>  
        );
    }
}

我在这里调用函数：

renderComments('hi', 'hello', 'whatever');

对不起，如果这是一个菜鸟问题，我刚进入React。

Answer 1

我不是React的专家，但看起来您的代码正在同一HTML容器中呈现Comment组件。

因此每个循环运行渲染都会用新的Comment替换HTML容器。

您应该创建一个处理列表的渲染方法。

我在这里找到了一些指南：

http://jasonjl.me/blog/2015/04/18/rendering-list-of-elements-in-react-with-jsx/

希望这有帮助。

只有最后一个React元素在for循环中呈现

1 个答案: