Question

如果我有一个无状态的功能组件，可以接收道具并必须对数据进行分类：根据类别进行显示，则每个类别都有子类别，我将如何渲染它。我的代码如下所示：

import React from "react";
import "./style.css";

const IndicatorSelector = props => {
  const indicators = props.indicators || [];
  console.log(indicators);

  return indicators
    .sort((a, b) => a.name > b.name)
    .map((indicator, index) => {
      return (
        <div>
          <ul className="checkBox">
            <li className="list">
              <input
                key={`${index}`}
                type="checkbox"
                name={indicator}
                className="checkInput"
              />
              <label for="indicator">{indicator.type}</label>
            </li>
          </ul>
        </div>
      );
    });
};
export default IndicatorSelector;

Answer 1

您可以使用lodash中的groupBy根据names进行分类。第一个参数将是数组/对象。第二个参数将是转换键的功能。在您的情况下，由于需要对name进行分组，因此需要从函数中返回name。

    _.groupBy([ { "name": "Gini Measure", "type": "Disposable Gini" }, { "name": "Gini Measure", "type": "Market Gini" }, { "name": "Gini Measure", "type": "Absolute Redistribution" }, { "name": "Gini Measure", "type": "Relative Redistribution" } ], 
(x) => x.name);

输出：

{"Gini Measure":[{"name":"Gini Measure","type":"Disposable Gini"},{"name":"Gini Measure","type":"Market Gini"},{"name":"Gini Measure","type":"Absolute Redistribution"},{"name":"Gini Measure","type":"Relative Redistribution"}]}

考虑到要呈现子类别，可以按照以下方式进行操作：

const IndicatorSelector = props => {
  const indicators = props.indicators || [];
  const grouped = _.groupBy(indicators, x => x.name);
  return Object.keys(grouped).
    .map(x => {
      return (
        <div>
          <label for="indicator">{x}</label>
          {grouped[x].map((obj, index) => (
            <ul className="checkBox">
            <li className="list">
              <input
                key={`${index}`}
                type="checkbox"
                name={obj}
                className="checkInput"
              />
              <label for="indicator">{obj.type}</label>
            </li>
          </ul>)
          )}
        </div>
      );
    });
};
export default IndicatorSelector;

在反应中按类别渲染子类别

1 个答案: