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

【问题标题】：React: Material-UI GridListTile looses style attributes when called from within componentReact：从组件内调用时，Material-UI GridListTile 会丢失样式属性
【发布时间】：2021-07-18 10:02:10
【问题描述】：

我有一个 UI，我在其中呈现 <GridList>，其中包含我定义为自定义组件的图块。

当我第一次写这篇文章时，我对 React 钩子的性质、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>

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

【问题讨论】：

标签： reactjs material-ui virtual-dom

【解决方案1】：

当我完成输入问题时，我已经意识到如何暂时修复我的特定错误，允许在我的组件中更多地使用钩子等：

const VideoTileInner = ({...props}) => {
    const { url } = props;
    const classes = useStyles();
    
    return (
        <>
            <video src={url} className={classes.videoPreview} />
            <GridListTileBar title={url} />
        </>
    )
}

const VideoBrowser = ({...props}) => {
    const {vidUrls} = props;
    const classes = useStyles();
    return (
        <GridList cellHeight='auto' cols={4} className={classes.videoGridList}>
        {videoUrls.map((url) => {
          return (
            <GridListTile key={url} cols={1} className={classes.videoTile}>
              <VideoTileInner url={url} />
            </GridListTile>
          )
        })}
        </GridList>
    )
}

不过，正如问题中所提到的，我想更好地理解这个问题，我可以如何以不同的方式解决它，或者是否有一个我应该理解的一般原则，以避免将来出现类似问题。

或者，事实上，这是否可以被视为 Material-UI 中的错误。

【讨论】：