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

问题描述：

我有一个简单的函数，它接受无限数量的字符串并呈现Comment元素。但是，这里仅显示最后一个组件。这里的功能：只有最后一个React元素在循环中呈现

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');

很抱歉，如果这是一个noob问题，我刚刚进入React。

您反复渲染ID为“comments”的元素，每个元素覆盖最后一个元素。也许你想要的是一个'CommentList'组件？ – univerio

['ReactDOM.render（）'控制你传入的容器节点的内容。里面的任何现有的DOM元素在第一次被调用时被替换。稍后调用React的DOM差异算法进行有效更新。]（https://facebook.github.io/react/docs/top-level-api.html#reactdom.render） – Kujira

答

我不是React的专家，但看起来你的代码在同一个HTML容器中渲染了Comment组件。

因此，每个循环运行渲染替换HTML容器与新的Comment。

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

我发现这里的一些指南为您提供：

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

希望这有助于。

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

相关推荐