Question

我有一个很大的JSON文件（大约700条记录）。

我想基于此JSON文件创建700个ListItem组件，并将它们显示在List组件中。

我认为它看起来应该是这样的，不幸的是我的createList函数根本不会创建任何<ListElement>：

import React from 'react';
import ListItem from './ListItem.jsx'

import {FOO} from './data.js';

var countries = [];

class List extends React.Component {
  createList() {
    FOO.forEach(function(element) {
      console.log(element);
      return <ListItem />;
    });
  }

  render() {
    return (
        <ul>
          {this.createList()}
        </ul>
    );
  }
}

export default List;

console.log(element);按预期工作，我可以看到控制台中显示的所有元素，但没有任何内容被渲染。

另一方面，当我这样做时：

createList() {
  return <ListItem />;
}

它可以工作，但只渲染一个不基于我的JSON的List项。

（我将来会将一些道具从JSON传递给我的ListItem）

我做错了什么？我试着这样称呼它，但效果相同：

componentDidMount(){
  this.createList();
}

感谢您的帮助！

Answer 1

您需要从函数中返回组件/组件。

示例

rax

Answer 2

您没有返回组件列表，请将createList更改为：

createList() {
  return FOO.map(function(element) {
    console.log(element);
    return <ListItem />;
  });
}

注意return

前面的FOO.map

React - 根据mount上的json数据创建数百个组件实例？

2 个答案: