在 React 中覆盖 RSS 提要样式

Question

我正在尝试将我自己的风格应用到博客 post我通过 React 中的 rss 提要获得。目前我正在使用 rss-parser 来获取内容，并且我正在使用 dangerouslySetInnerHTML 道具来显示它。

获取内容：

function Blog(props) {
const [feed, setFeed] = useState(null)
let blogID = 0;
let feedName = 'https://roco.org/feed/'

useEffect(() => {
    const fetchData = async () => { 
        let test = await parser.parseURL(CORS_PROXY + feedName);
        setFeed(test)
        console.log("test", test)

      };
    fetchData()
}, []);

let title   = ""
let content = ""
let date    = ""
let finalContent = []
let parsedContent = []
if(feed) {

    title    = feed.items[blogID].title
    content  = feed.items[blogID]["content:encoded"]
    let isoDate     = feed.items[blogID].pubDate
    let convDate = new Date(isoDate)
    date = convDate.getFullYear()+'-' + (convDate.getMonth()+1) + '-'+convDate.getDate()

}

显示内容：

<div className= "Blog-content" dangerouslySetInnerHTML={{__html: content}}>
</div>

但是，博客组件的样式 post 经常覆盖我自己的样式。例如，博客中包含的图片无法正确调整大小：

<div style=\"width: 1034px\" class=\"wp-caption aligncenter\"><a href=\"https://www.houstonpress.com/arts/roco-gets-well-deserved-grammy-nod-for-first-album-visions-take-flight-11391485\"><img src=\"https://roco.org/wp-content/uploads/2019/12/roco_river_oaks_chamber_orchestra_concert_photo_02_credit_joel_luks.jpg\" alt=\"ROCO in concert at The Church of St. John the Divine. \" width=\"1024\" height=\"683\" /></a>

有没有一种方法可以在不编写自己的 html 解析器的情况下覆盖样式？

Answer 1

我假设无法修改您从提要中收到的 HTML，并且 HTML 包含内联样式以及 height/width 属性。

有几种方法可以解决这个问题-

您可以简单地确保适用的类的 CSS 定义具有 !important 指令。例如-


    .wp-caption {
      width: 500px !important;
    }

您可以使用 ReactHtmlParser API 替换特定节点。


    const replace = domNode => {
      if (domNode.attribs) {
        let attrs = domNode.attribs;
        if(attrs.style) {
          attrs.style = null;
        }
        if(attrs.width) {
          attrs.width = null;
        }
        if(attrs.height) {
          attrs.height = null;
        }
        return (domNode);
      }
    };
    HTMLReactParser(html, { replace });

请注意，在处理 "style" 属性的情况下，这有点繁重。由于 domNode.attribs.style 属性是一个字符串，如果您使用上述代码，您将删除所有内联样式定义。为了更智能地仅删除维度属性，您必须使用字符串操作（正则表达式等）来处理它——这并不理想。话虽如此，来自 RSS 提要的内联样式真的应该取代您要呈现的内容吗？在大多数情况下，我会争论 'no'。

此外，根据 ReactHtmlParser 文档，您根本不必使用 "dangerouslySetInnerHTML" 函数。

在 React 中覆盖 RSS 提要样式

Override RSS feed styling in React

html

css

rss

node.js

reactjs