React：Material-UI GridListTile 从组件内部调用时会丢失样式属性

问题描述

我有一个 UI，我在其中使用我定义为自定义组件的图块渲染 <GridList>。

当我第一次写这篇文章的时候，我对 React hooks 的本质、props 是如何传递等感到有点困惑。所以，我把它作为一个普通的 JS 函数来调用：

const VideoTile = ({...props}) => {
    const { url,classes } = props;
    
    return (
        <GridListTile key={url} cols={1} className={classes.videoTile} >
            <video src={url} className={classes.videoPreview} />
            <GridListTileBar title={url} />
        </GridListTile>
    )
}

const VideoBrowser = ({...props}) => {
    const {vidUrls,classes} = props; //for the sake of brevity
    return (
        <GridList cellHeight='auto' cols={4} className={classes.videoGridList}>
          {videoUrls.map((url) => VideoTile({url,classes}))}
        </GridList>
    )
}

请注意，我在函数内的 tile 中添加了 key 属性以安抚 React。

通过对 React 的更好理解来查看代码，我对其进行了更改，以便可以使用 JSX 语法调用它，在组件中使用钩子等，并希望遵循更好的实践。然而，我发现 Material-UI 在 React 的虚拟 DOM 上运行的方式意味着它在这里渲染两个孩子的方式非常不同：

（我暂时移除了钩子，专注于渲染单个组件，以便我可以在 devtools 中进行比较）。

<GridList cellHeight='auto' cols={4} className={classes.videoGridList}>
  {VideoTile({url,classes})}
  <VideoTile url={url} classes={classes} />
</GridList>

第一个版本在外部 { width: 25%; height: auto; padding: 2px; } 中添加了一些元素样式属性 <li>。后一个版本没有，大概是因为添加它们的代码不理解 <VideoTile> 的顶级元素实际上是一个 <GridListTile>，因此很有趣。我想我会重新排列代码，以便 <GridListTile> 出现在函数之外，但我想更好地理解这个问题，我如何以不同的方式解决它，或者是否有一个一般原则我应该明白，避免以后出现类似问题。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

material-ui reactjs reactjs virtual-dom