Reactjs 使用类构造函数串联显示来自外部数据源的对象数组的明确用例

正如大家可能已经知道的那样，react文档非常模糊和不完整，令人感到羞耻，甚至可笑。对于如何正确构造使用

map（）

在保存数据的externak文件中显示元素的类构造函数，这导致了一些混淆

正如这篇文章的标题所暗示的，我正试图将我客户的主要联系信息（一系列对象）输入一个

Rolodex，

，每个条目或客户都有自己的

卡。

react文档提到了类构造函数的使用，但在列表相关部分的示例中只使用了函数。在关于状态和生命周期的部分中有一个模糊的提及，即积分过程是不同的，因为类不像函数那样接受参数。鉴于我的既定目标，我应该如何构建这一架构？我应该用课堂吗

这是我可怕的失败尝试：

    import React, {Component} from 'react';
import Card from './Card.js'
import students from student_records.js


class Rolodex extends Component {
  constructor(props) {
    super(props);
  //no idea if or why or how I'm supposed to make my data objects available through state
  this.state = {key: this.students.Id}
           }
  render({
    return(
      <div className="Rolodex">
//display cards
        <Card /> student.map(studentinfo)=>
//do i put the map here or in the card?
      </div>

    )                                              }                                              }                                                                                                 export default Rolodex;

有人能给我一个干净、整洁、直截了当的例子吗

---

很抱歉格式化了。我在用手机。

这里有一个

的例子，你可以用类似的方式扩展到

：

import React, { Component, PropTypes } from 'react';
import Card from './Card.js';

class Rolodex extends Component {
  render() {
    return (
      <div className="Rolodex">
        { this.props.students.map(student =>
          <Card
            key={student.Id}
            info={student}
          />
        )}
      </div>
    );
  }
}

Rolodex.propTypes = {
  students: PropTypes.arrayOf(PropTypes.object),
};

// Use with <Rolodex students={students} />
export default Rolodex;

import React，{Component，PropTypes}来自'React'；
从“/Card.js”导入卡片；
类Rolodex扩展了组件{
render（）{
返回(
{this.props.students.map（student=>
)}
);
}
}
Rolodex.propTypes={
学生：PropTypes.arrayOf（PropTypes.object），
};
//配合使用
导出默认Rolodex；

import React, { Component, PropTypes } from 'react';
import Card from './Card.js';

class Rolodex extends Component {
  render() {
    return (
      <div className="Rolodex">
        { this.props.students.map(student =>
          <Card
            key={student.Id}
            info={student}
          />
        )}
      </div>
    );
  }
}

Rolodex.propTypes = {
  students: PropTypes.arrayOf(PropTypes.object),
};

// Use with <Rolodex students={students} />
export default Rolodex;