Question

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

橙色系列中的每个橙色都有一个＆＃34; appleId＆＃34;字段，映射到关联Apple的_id。

目前我所拥有的并不是我想要的。理想的列表应呈现为：

Apple 1
- Orange 1A
- Orange 1B
Apple 2
- Orange 2A
- Orange 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

如果数据关系如您所说，那么苹果渲染器是否也有责任渲染橙子？

e.g。

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

更新

然后Apple组件将负责显示与每个苹果相关的橙子。 e.g。

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
};

在Reactjs

1 个答案: