ReactJS:在循环中返回React组件
ReactJS:在循环中返回React组件
提问于 2016-10-08 18:41:32
我尝试遍历一个数组，并在每个元素上返回一个React组件。正在调用呈现函数，但没有显示任何内容。
class ListOfFoundPages extends Component {
constructor(props) {
super(props);
this._renderList = this._renderList.bind(this);
}
_renderList(data) {
if (data !== null) {
// eslint-disable-next-line
data.list.map( (obj) => {
return <ListItem obj={obj} />;
});
}
}
render() {
return (
<ul className="listOfFoundPages">
{this._renderList(this.props.list)}
</ul>
);
}
}这是要返回的组件：
const ListItem = (props) => {
return (
<li>
<div className="foundPagesItem">
<img role="presentation" className="searchPageImg" src={props.obj.picture.data.url} />
<span className="searchPageInfo">{props.obj.name} - {props.obj.category}</span>
</div>
<div className="seperator" />
</li>
);
};
export default ListItem;回答 1
Stack Overflow用户
发布于 2016-10-08 18:58:17
_renderList函数应该返回一个组件数组(data.list.map...的结果)。目前，它不会返回任何内容。代码需要如下所示：
_renderList(data) {
if (data !== null) {
// eslint-disable-next-line
return data.list.map( (obj) => {
return <ListItem obj={obj} />;
});
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39931400
复制相关文章
相似问题
腾讯云开发者
