根據數組數據創建React組件

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

擁有對象數組並進行迭代以返回多個相似的組件是一個好習慣。 您正在使用用戶實例獲取計數，所以如果您將它們放在控制器中會很好