[英]Iterating through a for loop and appending results to a react component
Im curious on how to iterate through an array and append the results to a react component. 我对如何遍历数组并将结果附加到react组件感到好奇。 Ive gotten the part of sorting through an array of objects and grabbing the accounts that I want. 我已经完成了对一组对象进行排序并获取我想要的帐户的工作。 Now im unsure of how to go about appending them to html. 现在我不确定如何将它们附加到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>
);
} }
} }
Use .map() to iterate through an array. 使用.map()遍历数组。 In this case contacts
is an array of objects like entries
. 在这种情况下, contacts
是一系列对象(例如entries
。 Here I'm using an ES6 syntax and JSX . 在这里,我正在使用ES6语法和JSX 。
The map() method creates a new array with the results of calling a provided function on every element in the calling array. map()方法创建一个新数组,并在调用数组中的每个元素上调用提供的函数。
return(
<div>
<ul>
{ contacts.map(contact => (
<li key={contact.id}>
{contact}
</li>
)
)}
</ul>
</div>
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.