如何在 React Select (V2) 中创建嵌套选项组? [英] How can I create nested option groups in React Select (V2)?

问题描述

在 React-Select V2 中，我们可以通过传递一个 options 参数来创建选项组，如下所示:

options = [{ 标签:'组'，选项:[{标签:'选项1'，值:'1'}，{标签:'选项2'，值:'2'}]}]

我需要能够深入到另一层，例如:

options = [{ 标签:'组'，选项:[{标签:'选项1'，值:'1'}，{ 标签:'选项 2'，选项:[{标签:'选项2-a'，值:'2a'}，{标签:'选项2-b'，值:'2b'}，]}]}]

这将在选项 2"下的组中显示选项选项 2-a"和选项 2-b".上面的方法不是开箱即用的，所以我想知道是否有办法在 React-Select V2 中创建嵌套组.

解决方案

对于任何有类似需求的人，我实施了这个递归解决方案.

const renderNestedOption = (props, label, nestedOptions) =>{常量{CX,获取样式，内部道具，选择选项，} = 道具;//将应用于嵌套的 optgroup 标头constnestedLabelClassName = cx(css(getStyles('groupHeading', props)),{选项:真}，'嵌套选择组标签'，);返回 (<div className="nested-optgroup"><div className={nestedLabelClassName}>{标签}

{nestedOptions.map((nestedOption) => {如果(nestedOption.options){//参见下文//阅读以上部分返回 renderNestedOption(props,nestedOption.label,nestedOption.options);}constnestedInnerProps = innerProps;nestedInnerProps.onClick = () =>选择选项(嵌套选项)；返回 (<div className="nested-optgroup-option";键={nestedOption.value}><components.Option {...props} innerProps={nestedInnerProps}>{nestedOption.label}</components.Option>

);})}

);};const Option = (props) =>{常量{孩子们，数据，} = 道具;constnestedOptions = data.options;如果(嵌套选项){const label = data.label;返回 renderNestedOption(props, label, nestedOptions);}返回 (<components.Option {...props}>{孩子们}</components.Option>);};

然后在您的选择组件中，将 Option 组件替换为我们刚刚创建的自定义 Option 组件.

编辑

有一个开放的拉取请求来支持这个功能:https://github.com/JedWatson/react-select/pull/2750

In React-Select V2, we're able to create option groups by passing an options param like so:

options = [
    { label: 'Group', options: [
        { label: 'Option 1', value: '1' },
        { label: 'Option 2', value: '2' }
    ]}
]

I need to be able to go another layer deep, something like:

options = [
    { label: 'Group', options: [
        { label: 'Option 1', value: '1' },
        { label: 'Option 2', options: [
            { label: 'Option 2-a', value: '2a' },
            { label: 'Option 2-b', value: '2b' },
        ]}
    ]}
]

Which would display the options "Option 2-a" and "Option 2-b" in a group under "Option 2". The approach above doesn't work out of the box, so I want to know if there's a way to create nested groups in React-Select V2.

解决方案

For anyone who comes here with a similar need, I implemented this recursive work-around.

const renderNestedOption = (props, label, nestedOptions) => {
  const {
    cx,
    getStyles,
    innerProps,
    selectOption,   
  } = props;

  // Will be applied to nested optgroup headers 
  const nestedLabelClassName = cx(
    css(getStyles('groupHeading', props)),
    { option: true },
    'nested-optgroup-label',
  );    

  return (
    <div className="nested-optgroup">
      <div className={nestedLabelClassName}>
        {label}
      </div>
      {nestedOptions.map((nestedOption) => {
        if (nestedOption.options) {
          // Read below
          // Read above
          return renderNestedOption(props, nestedOption.label, nestedOption.options);
        }

        const nestedInnerProps = innerProps;
        nestedInnerProps.onClick = () => selectOption(nestedOption);
        return (
          <div className="nested-optgroup-option" key={nestedOption.value}>
            <components.Option {...props} innerProps={nestedInnerProps}>
              {nestedOption.label}
            </components.Option>
          </div>
        );
      })}
    </div>   
  ); 
};

const Option = (props) => {
  const {
    children,
    data,
  } = props;
  const nestedOptions = data.options;

  if (nestedOptions) {
    const label = data.label;
    return renderNestedOption(props, label, nestedOptions);
  }

  return (
    <components.Option {...props}>
      {children}
    </components.Option>
  );
};

Then in your select component, replace the Option component with the custom Option component we just created.

EDIT

There's an open pull request to support this functionality: https://github.com/JedWatson/react-select/pull/2750

这篇关于如何在 React Select (V2) 中创建嵌套选项组?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！