ReactJS:在循环中返回一个React组件

ReactJS: Returning a React Component in a loop

本文关键字：一个 React 组件 循环 返回 ReactJS      更新时间：2023-09-26

我试图通过数组循环并返回每个元素上的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;

_renderList函数应该返回一个组件数组(data.list.map...的结果)。目前，它没有返回任何东西。代码需要看起来像:

_renderList(data) {
  if (data !== null) {
    // eslint-disable-next-line
    return data.list.map( (obj) => {
      return <ListItem obj={obj} />;
    });
  }
}
相关文章：