Блог

Я смотрел на этот пример, приведенный в документах material-ui, и я не мог понять, что component={Paper} в этой строке делает:

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

Я запустил этот пример локально, и после удаления component={Paper} из кода я не увидел никаких визуальных изменений на веб-странице.
Единственное, что я нашел в документах, касающихся этой опоры, — это:

Компонент, используемый для корневого узла. Либо строка для использования HTML — элемента, либо компонент.

Однако я изо всех сил пытаюсь понять, что это значит. Я был бы признателен, если бы кто-нибудь мог простыми словами объяснить, что делает этот реквизит.

Он не должен изменяться визуально, если только корневой узел не применит дополнительный стиль к дочерним узлам. Если вы измените HTML-элемент, который отображается с помощью данного component , на что-то другое, кроме a div , это может иметь больше смысла для вашего понимания.

Например, если у меня есть этот компонент, который я хочу использовать в качестве корневого узла:

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

А затем визуализируйте сетку, как в примере:

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

Результатом будет то, что Grid рендеры будут отображаться как a <section /> , а не как по умолчанию <div /> .