Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/86.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 迭代for循环并将结果附加到react组件_Javascript_Html_Reactjs - Fatal编程技术网

Javascript 迭代for循环并将结果附加到react组件

Javascript 迭代for循环并将结果附加到react组件,javascript,html,reactjs,Javascript,Html,Reactjs,我很好奇如何遍历数组并将结果附加到react组件。 我已经完成了对一系列对象进行排序并获取我想要的帐户的部分。现在我不确定如何将它们附加到html中 export default class SortedTeams extends React.Component { renderContent(content){ var entries = [{fullname: 'foo', title: 'designer'}, {fullname: 'foo2', ti

我很好奇如何遍历数组并将结果附加到react组件。 我已经完成了对一系列对象进行排序并获取我想要的帐户的部分。现在我不确定如何将它们附加到html中

export default class SortedTeams extends React.Component {


  renderContent(content){
    var entries = [{fullname: 'foo', title: 'designer'}, {fullname: 
    'foo2', 
    title: 'designer'}, {fullname: 'foo3', title: 'developer'}]
    var nohit = [];

    for(var i = 0; i <= entries.length - 1; i++) {

      if(entries[i].title === 'designer'){
        console.log('foohit');
  }
      else{
        nohit.push('nope')
   }
  }

  render() {
    var content = this.props.block.content;


    return(
      <SiteBuilderBlock tag="section" className="sortedTeams" block={this.props.block}>
        <div>
        <SiteBuilderList tag="div" list="teams" inGroupsOf={4} inGroupsOfClassName="row">
         {(element, key) => this.renderContent(element, key)}
      </SiteBuilderList>
    </div>

  </SiteBuilderBlock>
);
导出默认类SortedTeam扩展React.Component{
renderContent(内容){
var条目=[{fullname:'foo',title:'designer'},{fullname:
"foo2",,
标题:'designer'},{fullname:'foo3',标题:'developer'}]
var nohit=[];
for(var i=0;i this.renderContent(元素,键)}
);
}

}用于迭代数组。在本例中,
联系人
是一组对象,如
条目
。这里我使用ES6语法和

map()方法创建一个新数组,其结果是对调用数组中的每个元素调用提供的函数

返回(
    {contacts.map(contact=>(
  • {contact}
  • ) )}
);
现在在公交车上,所以在编写代码方面帮不了什么忙,但请看一下map方法。
return(
  <div>
    <ul>
      { contacts.map(contact => (
          <li key={contact.id}>
            {contact}
          </li>
        )
      )}
    </ul>
  </div>
);