在 React JS 中按下拉列表组件分组

Question

我想使用以下包创建下拉列表组件。

http://jquense.github.io/react-widgets/api/DropdownList/

而且我想分组显示列表项，我可以不分组显示数据，但需要按男性和女性分组显示。下面是我的数据格式。

"data": [
  {
    "categoryName": "Men",
     "children": [
      {
       "categoryName": "Apparel",
       "categoryId": 2742
      },
      {
       "categoryName": "Fragrances",
       "categoryId": 2746
      }
     ]
  },
  {
    "categoryName": "Women",
     "children": [
      {
       "categoryName": "Apparel",
       "categoryId": 2742
      },
      {
       "categoryName": "Fragrances",
       "categoryId": 2746
      }
     ]
  }
]

下面是我的显示组件。

<DropdownList
 id={id}
 onChange={(e) => callbackFun(className, e)}
 data={data[0].children}
 value={value}
 inputProps={inputProps}
 valueField={keyVal}
 textField={keyName}
 placeholder={placeholder}
/>

需要下拉菜单的图片。

Answer 1

你可以这样做，

const Category = ({ category }) => <optgroup label={category.categoryName}>
        {category.children.map(({ categoryName, categoryId }) => <option key={categoryId} value={categoryId}>{categoryName}</option>)}
</optgroup>

const DropDownList = ({ data }) => <select name="stores" id="stores">
    {data.map(element => <Category category={element} />)}
</select>

const App = () => <DropDownList data={data} /> // either App or whatever other component that will render DropDownList with the fetched data

您的父 DropDownList 组件将包含您的类别，在这种情况下，您的 men 和 women 类型的商店（或任何可能的类型）将位于Category 组件。

这应该呈现类似于 this 的内容。

Answer 2

我不太确定您所指的回购提供了哪些额外价值。但是，要分组呈现您的选项，您可以简单地在 render:

上使用 <optgroup> 元素

const { render } = ReactDOM,
      rootNode = document.getElementById('root')
      
const sampleData = {"data":[{"categoryName":"Men","children":[{"categoryName":"Apparel","categoryId":2742},{"categoryName":"Fragrances","categoryId":2746}]},{"categoryName":"Women","children":[{"categoryName":"Apparel","categoryId":2742},{"categoryName":"Fragrances","categoryId":2746}]}]}

const DropDown = ({data}) => (
  <select>
    <option selected disabled>Select...</option>
    {
      data.data.map(({categoryName, children}, key) => (
        <optgroup label={categoryName} key={key}>
          {
            children.map(({categoryId, categoryName}) => (
              <option key={categoryId}>
                {categoryName}
              </option>
            ))
          }
        </optgroup>
      ))
    }
  </select>
)

render (
  <DropDown data={sampleData} />,
  rootNode
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script><div id="root"></div>

在 React JS 中按下拉列表组件分组

group by dropdown list component in React JS

javascript

sorting

drop-down-menu

ecmascript-6

reactjs