Создание реагирующих компонентов из данных массива - PullRequest
Новая
       34

Создание реагирующих компонентов из данных массива

0 голосов
/ 05 декабря 2018

Я создаю довольно простую страницу статистики для панели инструментов в моем приложении rails.Я использую реактивные рельсы для создания реактивных компонентов в моем приложении и имею один для стат-карты.enter image description here

Для этих карт я создал очень простой компонент реагирования 

import React from "react";
import PropTypes from "prop-types";
class StatCard extends React.Component {
  render() {
    const { title, data } = this.props;
    return (
      <React.Fragment>
        <div className="card">
          <div className="card-body">
            <div className="row align-items-center">
              <div className="col">
                <h6 className="card-title text-uppercase text-muted mb-2">
                  {title}
                </h6>

                <span className="h2 mb-0">{data}</span>
              </div>
              <div className="col-auto">
                <span className="h2 fe fe-briefcase text-muted mb-0" />
              </div>
            </div>
          </div>
        </div>
      </React.Fragment>
    );
  }
}

StatCard.propTypes = {
  title: PropTypes.string,
  data: PropTypes.integer
};
export default StatCard;

На моей html-странице прямо сейчас у меня есть 4 различных компонента, перечисленных по вызову этого4 разных типа с разными данными и разными названиями. 

<%= react_component("StatCard", {title: 'Total users', data: @users.count }) %>

Лучше ли было бы перечислять массив объектов с этими данными в списке, итерировать по ним и генерировать эти компоненты таким образом?Если да, то будут ли эти данные лучшими в модели или контроллере?

Структура данных может выглядеть примерно так: 

data = [
  { title: 'Total users', data: @users.count },
  { title: 'Total questions', data: @questions.count }
]

1 Ответ

0 голосов
/ 05 декабря 2018

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

...