时间戳

首页 > 解决方案 > 如何在反应中只给地图的第一个结果提供道具？

reactjs - 如何在反应中只给地图的第一个结果提供道具？

问题描述

我使用 map 从 Array 中创建了一个组件列表。我必须只为地图的第一个结果提供道具。我该怎么做？（只给元素 Array[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>
      );
    }
  };

标签： reactjsdictionary

解决方案

您可以使用过滤第一个和所有其他元素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>
  );
}

推荐阅读