2

在使用 Material-ui Hidden API 和 React Lifecycle 方法时，我遇到了一些错误。

隐藏的 API

背景：我正在使用 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>

对此有何建议？

4

0 回答 0