0
我想循環一個數組並在每個元素上返回一個React組件。渲染函數被調用,但沒有任何顯示。ReactJS:在一個循環中返回一個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;
https://jsfiddle.net/jwm6k66c/1785/ – zloctb