React:Material-UI GridListTile 在从组件内调用时丢失样式属性
React: Material-UI GridListTile looses style attributes when called from within component
我有一个 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>
)
}
请注意,我在函数内的磁贴中添加了一个 key
属性以安抚 React。
在更好地理解 React 的情况下查看代码,我将其更改为可以使用 JSX 语法调用它,在组件中使用挂钩等,并希望遵循更好的实践。但是,我发现 Material-UI 在 React 的虚拟 DOM 上运行的方式意味着它在这里呈现两个 children 非常不同:
(我现在已经删除了钩子,并专注于渲染单个组件并排在一起,以便我可以在 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>
的 top-level 元素实际上是一个 <GridListTile>
,因此很有趣。我想我只是 re-arrange 代码,以便 <GridListTile>
出现在函数之外,但我想更好地理解这个问题,我可能如何以不同的方式解决它,或者是否有一般原则我应该了解以避免将来出现类似问题。
当我完成输入问题时,我已经意识到如何暂时修复我的特定错误,允许在我的组件中更多地使用挂钩等:
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 中的错误。
我有一个 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>
)
}
请注意,我在函数内的磁贴中添加了一个 key
属性以安抚 React。
在更好地理解 React 的情况下查看代码,我将其更改为可以使用 JSX 语法调用它,在组件中使用挂钩等,并希望遵循更好的实践。但是,我发现 Material-UI 在 React 的虚拟 DOM 上运行的方式意味着它在这里呈现两个 children 非常不同:
(我现在已经删除了钩子,并专注于渲染单个组件并排在一起,以便我可以在 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>
的 top-level 元素实际上是一个 <GridListTile>
,因此很有趣。我想我只是 re-arrange 代码,以便 <GridListTile>
出现在函数之外,但我想更好地理解这个问题,我可能如何以不同的方式解决它,或者是否有一般原则我应该了解以避免将来出现类似问题。
当我完成输入问题时,我已经意识到如何暂时修复我的特定错误,允许在我的组件中更多地使用挂钩等:
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 中的错误。