在使用 Material-ui Hidden API 和 React Lifecycle 方法时,我遇到了一些错误。
背景:我正在使用 React、Next、Cosmic 构建一个博客。来自 cosmicJS 的帖子内容是通过 dangerouslySetInnerHTML 插入的。
为了给 CosmicJS 中的组件设置样式
componentDidMount() {
const imgs = document.getElementsByClassName('fr-fic');
Array.from(imgs).map( img => {
img.style.width = '100%';
img.style.height = 'auto';
});
const videos = document.getElementsByTagName('iframe');
Array.from(videos).map((video) => {
video.style.position = 'relative';
video.style.top = 0;
video.style.left = 0;
video.style.width = '100%';
video.style.height = 360;
});
然后使用 Hidden API 来制作响应式页面。由于某种原因,隐藏 API 通过 componentDidMount() 导致组件样式出现问题。就我而言,在博客文章结束时(页面结束),将呈现一篇新文章。只有在渲染新帖子时,上述样式才会生效。
<Hidden mdUp>
<div className={this.classes.mobilepost_content} dangerouslySetInnerHTML={this.renderMarkup(this.articleContent)} />
</Hidden>
<Hidden smDown>
<div className={this.classes.deskpost_content} dangerouslySetInnerHTML={this.renderMarkup(this.articleContent)} />
</Hidden>
对此有何建议?