反应:从组件内部调用时，Material-UI GridListTile会释放样式属性 [英] React: Material-UI GridListTile looses style attributes when called from within component

问题描述

我有一个UI，其中我渲染了一个< GridList> ，其中包含我定义为自定义组件的图块.

I have a UI where I render a <GridList> with tiles that I define as custom components.

当我第一次写这篇文章时，我对React钩子的性质，道具的传递方式等感到有些困惑.因此，我将其称为常规JS函数:

When I first wrote this, I was a bit confused about the nature of React hooks, how props are passed etc. So, I was calling it as a regular JS function:

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>
    )
}

请注意，我正在向函数内的图块添加 key 属性以安抚React.

Notice that I was adding a key attribute to the tile within the function to appease React.

在对代码进行了更深入的了解之后，我对其进行了更改，以便可以使用JSX语法，在组件中使用钩子等调用它，并希望遵循更好的做法.但是，我发现Material-UI在React的虚拟DOM上的操作方式意味着它使此处的两个子对象呈现出非常不同的方式:

Reviewing the code with a better understanding of React, I changed it such that it can be called with JSX syntax, using hooks within the component etc and hopefully following better practice. However, I've discovered that something about the way Material-UI operates on React's virtual DOM means that it renders the two children here very differently:

(我现在已经移除了钩子，并且专注于将单个组件并排渲染，以便我可以在 devtools 中进行比较).

(I've removed hooks for now and am focussing on rendering single components alongside each other so I can compare in devtools).

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

第一个版本具有一些元素样式属性 {width:25％;高度:自动；填充:2px；} 添加到外部的< li> 中.后一个版本没有，大概是因为添加它们的代码无法理解< VideoTile> 的顶级元素实际上是< GridListTile> ，因此也很有趣.我想我将重新排列代码，以使< GridListTile> 出现在函数之外，但我想更好地理解问题，如何以不同的方式解决它，或者有一个我应该理解的一般原则，以避免将来出现类似问题.

The first version has some element style attributes { width: 25%; height: auto; padding: 2px; } added to the outer <li>. The latter version doesn't, presumably because the code that adds them doesn't understand that the top-level element of <VideoTile> is actually a <GridListTile>, and, as such, of interest. I suppose I'll just re-arrange the code so that the <GridListTile> appears outside the function, but I'd like to understand the problem better, how I might solve it differently, or whether there's a general principle that I should understand to avoid similar problems in future.

推荐答案

当我完成输入问题时，我已经意识到如何立即修复特定的错误，从而允许在组件等中更多地使用钩子:/p>

By the time I finished entering the question, I'd realised how to fix my particular bug for now, allowing more use of hooks within my components etc:

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>
    )
}

但是，正如问题中提到的那样，我想更好地理解该问题，如何以不同的方式解决该问题，或者是否有一个我应该理解的一般性原则，以避免以后再出现类似的问题.

As mentioned in the question, though, I'd like to understand the problem better, how I might solve it differently, or whether there's a general principle that I should understand to avoid similar problems in future.

或者，实际上，是否可以将其视为Material-UI中的错误.

Or, indeed, whether this could be considered a bug in Material-UI.

这篇关于反应:从组件内部调用时，Material-UI GridListTile会释放样式属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！