0

我正在使用 MUI 5 自动完成组件和一个长列表的选项属性因为我在用户单击选择的时间和列表打开的时间之间有一些延迟我正在尝试添加“react-window”VariableSizeList到选项列表以获得更好的性能。

它正在工作，但是当列表有一个长文本项（超过 1 行）时，CSS 看起来很糟糕：

在此处输入图像描述

自动完成 JSX：

  return (
     <Autocomplete
      size="small"
      disableListWrap
      options={[{displayName: "option1"},
        {displayName: "option2 more than one row - long text css looks bad"},
        {displayName: "option3 more than one row - long text css looks bad"},
        {displayName: "option4 more than one row - long text css looks bad"},
        {displayName: "option5 more than one row - long text css looks bad"},
        {displayName: "option6 more than one row - long text css looks bad"},
        {displayName: "option7"},
        {displayName: "option6"},
      ]}
      ListboxComponent={ListBoxComponent}
      onChange={onSelectChange.bind(null, fieldName)}
      getOptionLabel={(option) => option.displayName || ""}
      value={value}
      isOptionEqualToValue={(selected, value) => selected.displayName === value.displayName}
      renderOption={(props, option) => [props, option]}
      renderInput={(params) => (
        <TextField {...params} variant="outlined" placeholder={"Select"} />
      )}
    />
  )

和列表框组件：

  const ListBoxComponent = React.forwardRef((props: any, ref: any) => {
    const { children, ...other } = props
    const itemData: any = []
    children.forEach((item: any) => {
      itemData.push(item)
      itemData.push(...(item.children || []))
    })

    const itemSize: number = 45

    return (
      <div ref={ref} {...other}>
        <VariableSizeList height={300} itemData={itemData} itemCount={itemData.length} itemSize={() => itemSize}>
          {renderRow}
        </VariableSizeList>
      </div>
    )
  })

和渲染行 JSX：

const renderRow = ({ index, data, style }: any): JSX.Element => {
    const dataSet = data[index]
    const displayOption: string = dataSet[1].displayName

    return (
      <li style={style} {...dataSet[0]}>
          <Typography>
            {displayOption}
          </Typography>
      </li>
    )
  }

我的猜测是因为我必须在 ListBoxComponent 中设置 itemSize 值，但我找不到如何为多行项目正确设置它的方法。

4

0 回答 0