Question

我试图遍历一个数组并在每个元素上返回一个React Component。正在调用渲染函数，但没有任何东西出现。

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;

Answer 1

_renderList函数应该返回一个组件数组（data.list.map...的结果）。目前，它不会返回任何内容。代码需要看起来像：

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

ReactJS：在循环中返回React组件

1 个答案: