css html-to-react:我如何用React组件替换所有'img'元素,同时保留样式?

hec6srdp  于 2023-06-25  发布在  React
关注(0)|答案(2)|浏览(95)

这个问题与html-to-react库有关。
假设我有下面的 *html字符串 *:
'<div> <img src="test.png" style="width: 100px;"/> <img src="test2.png" style="margin: 0px 4px;"/> </div>'
通常我会这样解析:

import {Parser} from 'html-to-react'
const reactElement = Parser.parse(htmlString);

这将生成一个React元素,其中有一个div和两个嵌套的img元素作为其子元素。
我怎样才能解析这个字符串,使每个img都被一个自定义的Image组件替换,保留img的原始 prop /属性(包括样式)?
例如,所得到的react元素将具有以下子元素:
<div> <Image src="test.png" style={{width: 100}}/> <Image src="test2.png" style={{margin: "0px 4px"}}/> </div>
感谢帮助!谢谢

2sbarzqh

2sbarzqh1#

你可以通过以下步骤来实现这一点,

Parser(htmlString, {
  replace: (domNode) => {
    if (domNode.name === "img") {
      return <Image src={domNode.attribs.src} style={{ width: 100 }} />;
    }
  },
});

这并不能完全解决你的问题,因为我可以看到你需要两个不同的风格为两个图像标签,但玩这个可能会给你一个解决方案。

nwsw7zdq

nwsw7zdq2#

请试试这个:

const { Parser } = require('html-to-react');

const htmlString = '<div>
    <img src="test.png" style="width: 100px;"/>
    <img src="test2.png" style="margin: 0px 4px;"/>
</div>'; 

const reactComponent = Parser.parseWithInstructions(
    htmlString,() {
        return true;
    },[
        {replaceChildren: true}
    ]
);

相关问题