在反应中呈现每个类别的子类别答案

【问题标题】：rendering sub-categories per category in react在反应中呈现每个类别的子类别
【发布时间】：2019-12-13 14:44:26
【问题描述】：

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

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;

【问题讨论】：

我想按名称呈现类型。因此类别：名称子类别：类型
能否提供样例数据和样例输出。
{ "data": [ { "name": "Gini Measure", "type": "Disposable Gini" }, { "name": "Gini Measure", "type": "Market Gini" }, { "name": "Gini Measure", "type": "Absolute Redistribution" }, { "name": "Gini Measure", "type": "Relative Redistribution" } ] 这必须按照分类给名字。 1 个名称将有多种类型

标签： reactjs jsx

【解决方案1】：

您可以使用groupBy from lodash 根据names 进行分类。第一个参数将是一个数组/对象。第二个参数将是一个转换键的函数。在您的情况下，由于您需要 groupBy 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;

【讨论】：