代码之家  ›  专栏  ›  技术社区  ›  Natalia

如何在反应中只给地图的第一个结果提供支持?

  •  1
  • Natalia  · 技术社区  · 6 年前

    我使用map从数组中列出组件。 我只需要给出地图的第一个结果。 我怎么能做到?(仅为元素数组[0]提供属性)。

    if (dropDownOptions && Array.isArray(dropDownOptions)) {
          return (
            <ul className={styles.ul}>
              {dropDownOptions.map((option)=> (
              
                <DropDownItem
                  iconName={option.iconName}
                  value={option.value}
                  displayValue={option.displayValue ? true : false}
                  key={option.name}
                  onClick={e => this.optionSelected()}
                >
                  {option.props.children}
                </DropDownItem>
              ))}
            </ul>
          );
        }
      };
    3 回复  |  直到 6 年前
        1
  •  1
  •   Dinesh Pandiyan    6 年前

    您可以使用 filter 然后在上面画地图。

    if (dropDownOptions && Array.isArray(dropDownOptions)) {
      return (
        <ul className={styles.ul}>
          {/* first element */}
          {dropDownOptions.filter((e, i) => i === 0).map((option, i) => (
            <DropDownItem
              iconName={option.iconName}
              value={option.value}
              displayValue={option.displayValue ? true : false}
              key={option.name}
              onClick={(e) => this.optionSelected()}
            >
              {option.props.children}
            </DropDownItem>
          ))}
          {/* all other elements */}
          {dropDownOptions.filter((e, i) => i !== 0).map((option, i) => (
            <DropDownItem>
              {option.props.children}
            </DropDownItem>
          ))}
        </ul>
      );
    }
    
        2
  •  0
  •   Hai Tien    6 年前

    你可以试试

    if (dropDownOptions && Array.isArray(dropDownOptions)) {
          return (
            <ul className={styles.ul}>
              {dropDownOptions.map((option, i)=> (
              (i == 1) ? (
                <DropDownItem
                  iconName={option.iconName}
                  value={option.value}
                  displayValue={option.displayValue ? true : false}
                  key={option.name}
                  onClick={e => this.optionSelected()}
                 /> )
                  :
               (your-child-here)
              ))}
            </ul>
          );
        }
      };
    
        3
  •  0
  •   DrEarnest    6 年前
    if (dropDownOptions && Array.isArray(dropDownOptions)) {
      return (
        <ul className={styles.ul}>
          {dropDownOptions.map((option, index)=> (
    
            <DropDownItem
              iconName={index === 0 ? option.iconName : ''}
              value={option.value}
              displayValue={option.displayValue ? true : false}
              key={option.name}
              onClick={e => this.optionSelected()}
            >
              {option.props.children}
            </DropDownItem>
          ))}
        </ul>
      );
    }
    

    };