时间戳

首页 > 解决方案 > 在反应中呈现每个类别的子类别

reactjs - 在反应中呈现每个类别的子类别

问题描述

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

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;

标签： reactjsjsx

解决方案

您可以使用groupBy fromlodash根据 进行分类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;

推荐阅读