MUI 自动完成组件中的 getTagProps 参数是常量吗?

发布于 2025-01-09 01:07:34 字数 1132 浏览 0 评论 0原文

在 MUI 的自动完成组件的文档中,我被告知 renderTags 应该具有以下形式:

Render the selected value.

Signature:
function(value: Array<T>, getTagProps: function) => ReactNode
value: The value provided to the component.
getTagProps: A tag props getter.

当我查看示例(如下所示)时,很明显 getTagProps 正在填充已选择的标签元素的选项。

    renderTags={(tagValue, getTagProps) =>
        tagValue.map((option, index) => (
          <Chip
            label={option.title}
            {...getTagProps({ index })}
            disabled={fixedOptions.indexOf(option) !== -1}
          />
        ))
      }

好吧,我的想法是 getTagProps 应该以某种方式根据每个 Chip 的索引填充 props,但我在作为 getTagProps 传入的源代码中找到的唯一函数是以下简单函数:

    getTagProps: ({ index }) => ({
      key: index,
      'data-tag-index': index,
      tabIndex: -1,
      onDelete: handleTagDelete(index),
    }),

如果这就是值总是作为 getTagProps 传递,我可以弄清楚发生了什么。然而,令我困惑的是,这将使 getTagProps 只是一个常量,那么为什么 renderTags 需要函数参数呢?我的意思是,他们可以将 getTagProps 设为仅 tagValue 的函数,并将其粘贴到上面调用 getTagProps({index}) 的代码中。

getTagProps 真的总是只是上述函数吗?或者我是否遗漏了有关它如何获取其值的信息?

In the documents for MUI's autocomplete component I'm told that the renderTags should have the following form:

Render the selected value.

Signature:
function(value: Array<T>, getTagProps: function) => ReactNode
value: The value provided to the component.
getTagProps: A tag props getter.

And when I look at the examples (such as that below) it's clear that getTagProps is filling in the options for the tag elements that have been selected.

    renderTags={(tagValue, getTagProps) =>
        tagValue.map((option, index) => (
          <Chip
            label={option.title}
            {...getTagProps({ index })}
            disabled={fixedOptions.indexOf(option) !== -1}
          />
        ))
      }

Alright, I get the idea is that somehow getTagProps is supposed to fill in the props for each Chip based on it's index but the only function I can find in the source that's passed in as getTagProps is the following trivial function:

    getTagProps: ({ index }) => ({
      key: index,
      'data-tag-index': index,
      tabIndex: -1,
      onDelete: handleTagDelete(index),
    }),

If that's the value that's always passed as getTagProps I can figure out what's going on. However, what's confusing me is the fact that this would make getTagProps just a constant so why does renderTags need a function argument? I mean they could have just made getTagProps a function of only tagValue and pasted in the code above where getTagProps({index}) is called.

Is getTagProps really always just the above function or am I missing something about how it gets it's value?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文