React自定义Select下拉菜单：如何向AsyncPaginate的Menu组件传外部变量

你之前的写法不生效，核心原因是AsyncPaginate的components配置项要求传入组件函数本身，而不是已经渲染完成的JSX元素、也不是组件执行后的返回结果。

最简单的解决方案 #

直接用匿名箭头函数封装一层，把你需要传入的自定义参数和AsyncPaginate默认传给Menu的props合并传递即可：

1. 先修改你定义的Menu组件，显式接收需要的外部参数：

const Menu = (props) => {
  // 从props里取出你需要的外部参数，加上原本就有的options
  const {options, width, minWidth, gridId} = props;
  // 剩下的原有逻辑保持不变
  const dropdownContainer = useRef(null);
  const [maxMenuHeight, setMaxMenuHeight] = useState(300)
  const [dropDownStyle, setDropDownStyle] = useState({
      position: "absolute",
      minWidth: `${minWidth ? minWidth + "px" : "100%"}`,
      maxWidth: `${width}px`,
      maxHeight: `${maxMenuHeight}px`,
      top: `32px`
  })
  // ... 剩余原有代码保持不变
}

2. 然后在给AsyncPaginate传components的时候做一层封装：

return <AsyncPaginate
    additional={defaultAdditional}
    isMulti={isMulti}
    value={value}
    loadOptions={loadOptions}
    onChange={handleChange}
    escapeClearsValue
    isClearable
    styles={getStylesForSelectorEditor(width, minWidth, newAlignment)}
    components={{
      // 这里传入匿名组件函数，先接收AsyncPaginate默认传给Menu的所有props，再合并你要传的自定义参数
      Menu: (menuProps) => <Menu {...menuProps} width={width} minWidth={minWidth} gridId={gridId} />
    }}
/>

备选方案：高阶组件工厂函数 #

如果你需要在多个地方复用这个自定义Menu，可以把它封装成工厂函数，提前把自定义参数注入：

// 定义工厂函数，接收自定义参数，返回适配好的Menu组件
const createCustomMenu = (customParams) => {
  const {width, minWidth, gridId} = customParams;
  return (props) => {
    const {options} = props;
    // 原有Menu逻辑不变，直接使用上方已经注入的width、minWidth等参数
    // ... 原有Menu代码保持不变
  }
}

// 使用的时候直接调用工厂函数传参即可
return <AsyncPaginate
    // 其他属性保持不变
    components={{
      Menu: createCustomMenu({width, minWidth, gridId})
    }}
/>

内容的提问来源于stack exchange，提问作者Max Moroz