Grid 布局中的 component prop 有什么作用？

Question

我正在查看 material-ui 文档提供的 this 示例，但我无法弄清楚这一行中的 component={Paper} 的作用：

 <Grid item xs={12} sm={8} md={5} component={Paper} elevation={6} square>

我在本地运行了这个示例，在从代码中删除 component={Paper} 后，我没有在网页上看到任何视觉变化。 我在文档中找到的关于这个道具的唯一内容是：

用于根节点的组件。使用 HTML 元素或组件的字符串。

但是，我很难理解这意味着什么。如果有人能用简单的语言解释该道具的作用，我将不胜感激。

Answer 1

除非根节点对子节点应用额外的样式，否则它不应在视觉上发生变化。如果您将由给定 component 呈现的 HTML 元素更改为 div 以外的其他内容，您可能更容易理解。

例如，如果我有这个组件我想用作根节点：

const GridRoot = (props) => (
  <section>{props.children}</section>
)

然后像例子一样渲染网格：

<Grid item xs={12} sm={8} md={5} component={GridRoot} elevation={6} square>

结果将是Grid 呈现为<section />，而不是默认的<div />。