Question

我正在为Rails应用程序中的仪表板创建一个非常简单的统计信息页面。我正在使用react-rails在我的应用程序中创建react组件，并且有一个用于stat卡的组件。

对于这些卡片，我创建了一个非常简单的react组件

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

Answer 1

有一个对象数组并对其进行迭代以返回多个相似的组件是一个好习惯。您正在使用用户实例来获取计数，所以如果您将它们放在控制器中就可以了

根据数组数据创建React组件

1 个答案: