Итерация по словарю с React для создания таблицы

reactjs

1647 просмотра

2 ответа

414 Репутация автора

Я хочу перебрать словарь для построения таблицы с использованием React, но я застрял с этой ошибкой:

PricingPlanTable.jsx: 33 Uncaught TypeError: Невозможно прочитать свойство 'map' из неопределенного

Вот мой код:

BillingAccount.jsx

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

export default class BillingAccount extends React.Component {
    render() {

        var pricingPlans = {
            'planNames': ['Starter', 'Bronze', 'Silver', 'Gold', 'Enterprise'],
            'planPrices': ['free', '$10', '$25', '$49', 'Contact Us'],
            'planOptions': [
                {'option': 'A', 'values': ['1', '2', '3', '4', '5']},
                {'option': 'B', 'values': ['1', '2', '3', '4', '5']},
                {'option': 'C', 'values': ['1', '2', '3', '4', '5']}

            ]
        };

        return (
            <div>
                <PricingPlanTable table={pricingPlans}/>
            </div>
        );
    }
}

PricingPlanTable.jsx

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

export default class PricingPlanTable extends React.Component {
    render() {
        const table = this.props.table.map((table, i) => {
            return (
                <div key={i}>
                    <table>
                        <tbody>
                            <tr>
                                <th></th>
                                <th>Starter</th>
                                <th>Bronze</th>
                                <th>Silver</th>
                                <th>Gold</th>
                                <th>Enterprise</th>
                            </tr>
                            <tr>
                                <td></td>
                                <td>free</td>
                                <td>19€ /mo</td>
                                <td>79€ /mo</td>
                                <td>190€ /mo</td>
                                <td>custom</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            )})
        return (
             <div>
                {table}
             </div>
        );
    }
}

Это макет того, чего я пытаюсь достичь: Это макет того, что я пытаюсь достичь

Таблица PricingPlanTable.jsx имеет жестко закодированную таблицу, но я пытаюсь использовать функциональность «this.props» React для ее итерации. Я хотел бы использовать скелет шаблона и заполнить его переменной valuingPlans из файла BillingAccount.jsx .

Автор: Joel Azevedo Источник Размещён: 18.07.2016 05:20

Ответы (2)


1 плюс

3029 Репутация автора

Прайс-листы, которые вы передаете как реквизит, являются объектом и не могут быть повторены. Вам нужно будет получить доступ к каждому объекту в тарифных планах, поскольку они на самом деле содержат массив и перебирают их.

Пожалуйста, посмотрите следующую документацию о том, как использовать Array.map () https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Итак, с вашей текущей структурой данных вы можете сделать что-то вроде следующего:

createHeaders() {
  this.props.table.planNames.map((plan) => {
    return <th>{plan}</th>
  });
}

createContent() {
  this.props.table.planPrices.map((price) => {
    return <tr>{price}</tr>
  });
}

render() {

  const table = this.props.table;

  return(
    <table>
      <tr>
        {this.createHeaders}
      </tr>
      <tr>
        {this.createContent}
      </tr>
    </table>
  )
}
Автор: erichardson30 Размещён: 18.07.2016 05:37

1 плюс

124187 Репутация автора

Сначала вы должны использовать массив с map. Вместо этого используйте map в planOptions. Во-вторых, на карте вы возвращаете таблицу снова и снова, скорее вы должны возвращать только строки. Это то, что должно быть.

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

export default class PricingPlanTable extends React.Component {
    render() {

        const table = this.props.table.planOptions.map((obj, i) => {
            return (
              <tr key={i}>
                <td>{obj.option}</td>
                {obj.value.map(value => {
                return (
                  <td>{value}</td> 
                );
              })}
              </tr>
            )})
        return (
             <div>
          <table>
                        <tbody>
                            <tr>
                                <th></th>
                                <th>Starter</th>
                                <th>Bronze</th>
                                <th>Silver</th>
                                <th>Gold</th>
                                <th>Enterprise</th>
                            </tr>
                            <tr>
                                <td></td>
                                <td>free</td>
                                <td>19€ /mo</td>
                                <td>79€ /mo</td>
                                <td>190€ /mo</td>
                                <td>custom</td>
                            </tr>
                            {tbody}
                        </tbody>
                    </table>

             </div>
        );
    }
}
Автор: Shubham Khatri Размещён: 18.07.2016 05:50
Вопросы из категории :
32x32