在 Reactjs 中渲染嵌套对象

Question

我正在关注 Meteor/Reactjs 教程。我有一个我们称之为苹果的项目列表，以及一个名为橙色的项目子列表。

orange 集合中的每个orange 都有一个“appleId”字段，该字段映射到关联Apple 的_id。

目前我所拥有的并不能如我所愿。理想的列表应该呈现为：

• 苹果 1
  • 橙色 1A
  • 橙色 1B
• 苹果 2
  • 橙色 2A
  • 橙色 2B

我使用这些功能：

renderApples() {
  return this.props.apples.map((apple) => (
    <Apple key = {apple._id} apple={apple) />
  ));
}
renderOranges() {
  return this.props.oranges.map((orange) => (
    <Orange key = {orange._id} orange={orange) />
  ));
}

然后像这样在我的主要组件中调用它们：

render() {
  return (
  <div>
    <ul>
      {this.renderApples()}
    </ul>
    <ul>
      {this.renderOranges()}
    </ul>
  );
}

这显然只是渲染了所有的苹果，然后是所有的橙子，但我一直很难找到一种聪明的方法来渲染它们。

Answer 1

如果数据关系如你所说，那不是苹果渲染器的责任也要渲染橙子吗？

例如

renderApples() {
  return this.props.apples.map((apple) => (
    <Apple key={apple._id}
        apple={apple}
        oranges={Oranges.find({appleId: apple._id}).fetch()} />
  ));
}

更新：

然后 Apple 组件会负责显示与每个苹果相关的橙子。例如

import React, {Component, PropTypes} from 'react';

export class Apple extends Component {
    constructor(props) {
        super(props);
    }

    renderOranges() {
        return this.props.oranges.map((orange) => (
            <Orange key={orange._id} orange={orange} />
        ));
    }

    render() {
        return (
            <div>
                <h1>I'm an Apple! {this.props.apple._id}</h1>
                <ul>
                    {this.renderOranges()}
                </ul>
            </div>
        );
    }
}

Apple.propTypes = {
    apple: PropTypes.object.isRequired,
    oranges: PropTypes.array.isRequired
};