组件属性中的 {...a11yProps(0)} 是什么意思？

Question

考虑以下组件的代码片段：

...
...

function a11yProps(index: any) {
  return {
    id: `simple-tab-${index}`,
    'aria-controls': `simple-tabpanel-${index}`,
  };
}

...
...

  return (
    <div className={classes.root}>
      <AppBar position="static">
        <Tabs value={value} onChange={handleChange} aria-label="simple tabs example">
          <Tab label="Item One" {...a11yProps(0)} />
          <Tab label="Item Two" {...a11yProps(1)} />
          <Tab label="Item Three" {...a11yProps(2)} />
        </Tabs>
      </AppBar>
      <TabPanel value={value} index={0}>
        Item One
      </TabPanel>
      <TabPanel value={value} index={1}>
        Item Two
      </TabPanel>
      <TabPanel value={value} index={2}>
        Item Three
      </TabPanel>
    </div>
  );
}

我很难理解以下组件的实现：

<Tab label="Item One" {...a11yProps(0)} />

这是什么{...a11yProps(0)} 意思？这是否意味着我传递这里的属性？

当我查看Tab的 API 文档时，我找不到id和aria-controls属性。

整个代码https://codesandbox.io/s/kz25m

Answer 1

它只是一个用于创建动态对象并将其用作道具的函数，以减少代码大小。

<Tab label="Item One" id="simple-tab-0" ariaControls="simple-tabpanel-0"/>

关于 TypeScript 和 Docs：如果您按住 ctrl 键并单击 Material-UI 组件，您可以看到它们在React.ElementType其中扩展了组件类型，您可以找到JSX.IntrinsicElements每个 HTML 元素都具有扩展React.DetailedHTMLProps的 props和。因此，您很自然地可以将该标签的所有可用属性传递给它们！HTMLAttributesAriaAttributesDOMAttributes