Хобрук: Ваш путь к мастерству в программировании

Рендеринг вложенных объектов в Reactjs

Я следую учебнику Meteor/Reactjs. У меня есть список элементов, которые мы назовем яблоком, и подсписок элементов, названный апельсином.

Каждый апельсин в коллекции апельсинов имеет поле «appleId», которое сопоставляется с _id соответствующего Apple.

В настоящее время то, что у меня есть, не работает так, как я хочу. Идеальный список должен выглядеть так:

  • Apple 1
    • Orange 1A
    • Оранжевый 1Б
  • Apple 2
    • Orange 2A
    • Оранжевый 2Б

Я использую эти функции:

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

Это, очевидно, просто отображает все яблоки, а затем все апельсины, но мне было трудно найти умный способ их рендеринга, как описано выше.

reactjs mongodb meteor
05.01.2017

  • Похоже, ваши данные неправильно отформатированы, так как я не понимаю, как вы узнаете, какие апельсины связаны с какими яблоками. 05.01.2017

Ответы:


1

если отношение данных такое, как вы говорите, не будет ли рендерер Apple также рендерить апельсины?

e.g.

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
};
05.01.2017
  • Во многом это то, о чем я думал, просто не знал, как впихнуть это в рендерер. Ваше решение имеет смысл, однако, к сожалению, оно не отображает оранжевые объекты, когда это делается таким образом. Я продолжу расследование. 06.01.2017
  • @NobodyInParticular, как сейчас выглядит ваш рендерер Apple? вам нужно переписать его, чтобы перебрать {this.props.oranges} и создать средства визуализации Orange. Я не могу сказать, пробовали ли вы это или думали, что это произойдет автоматически. 06.01.2017
  • В настоящее время это выглядит так: renderApples() { return this.props.apples.map((apple) => ( <Apple key={apple._id} apple={apple} oranges={Oranges.find({appleId: apple._id}).fetch()} /> )); } Далее: <ul> { this.renderApples() } </ul> Не то чтобы я думал, что это произойдет автоматически, я просто не могу понять, как вы будете перебирать апельсины. Это просто вложенный цикл for, но синтаксически у меня не было большого успеха. 06.01.2017
  • @NobodyInParticular, я обновил свой ответ, чтобы показать пример компонента Apple. он возьмет предоставленное ему свойство апельсинов и позаботится о рендеринге апельсинов. 06.01.2017
    • Новые материалы
    Блоги, которые обязательно нужно прочитать специалистам по обработке и анализу данных :
    Добро пожаловать в 2020! Новый год и новое десятилетие. Поскольку мы начинаем новый и захватывающий год в науке о данных, важно, чтобы профессионалы открыли для себя лучшие блоги по науке о..
    Универсальный базовый доход
    Универсальный базовый доход В последние годы концепция всеобщего базового дохода (УБД) набирает обороты как все более эффективное решение для борьбы с растущим неравенством доходов и..
    Освоение Python для анализа финансовых данных: руководство по получению данных о доходах от акций
    Если вы хотите научиться получать данные о доходах от акций с помощью Python, то это руководство для вас! В этой статье мы рассмотрим несколько примеров сбора данных о доходах от акций. Мы..
    Абсолютно имеет смысл.
    Абсолютно имеет смысл. Мой репетитор даже предложил то же самое. Одна проблема, с которой я столкнулся, заключается в том, что для каждой из категорий не было ярлыка «хорошо». Если я перебираю..
    МАШИННОЕ ОБУЧЕНИЕ И EDA
    Каковы шаги в машинном обучении Определение проблемы Генерация гипотез Извлечение данных Исследование данных Прогнозное моделирование Развертывание модели Зачем нам ЭДА? Идентификация..
    В чем основные различия между ReactJS и React-Native?
    В чем основные различия между ReactJS и React-Native? Что я узнал, создавая веб-приложения, а затем мобильные приложения на React React-Native существует уже около 2 лет и стал..
    LeetCode — Умножение строк
    Постановка задачи Даны два неотрицательных целых числа num1 и num2 , представленные в виде строк, вернуть произведение num1 и num2 , а также представлен в виде строки. Примечание . Вы..