html - 在 React 中覆盖 RSS 提要样式

Question

我正在尝试将我自己的风格应用到我通过 React 中的 RSS 提要获取的博客文章中。目前我正在使用 rss-parser获取内容，我正在使用 dangerouslySetInnerHTML Prop 来显示它。

获取内容:

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>

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

<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 包含内联样式以及高度/宽度属性。

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

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

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

1. 您可以使用 ReactHtmlParser API 替换特定 Node 。

    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 提要的内联样式真的应该取代您要呈现的内容吗？在大多数情况下，我会说“不”。

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