這個問題與html-to-react庫有關(guān)。

假設(shè)我有以下html字符串:

& ltdiv & gt & ltimg src = " test . png " style = " width:100px；"/& gt； & ltimg src = " test 2 . png " style = " margin:0px 4px；"/& gt； & lt/div & gt；'

通常我會這樣解析:

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

這將產(chǎn)生一個React元素，它的子元素是一個div和兩個嵌套的img元素。

我該如何解析這個字符串，以便用一個定制的圖像組件替換每個img，同時保留img的原始屬性(包括樣式)？

例如，生成的react元素將具有以下子元素:

& ltdiv & gt & ltimage src = " test . png " style = { { width:100 } }/& gt； & ltimage src = " test 2 . png " style = { { margin:" 0px 4px " } }/& gt； & lt/div & gt；

感謝幫助！謝謝

您可以通過執(zhí)行以下操作來實現(xiàn)這一點，

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

這并不能完全解決你的問題，因為我可以看到你需要兩種不同風(fēng)格的兩個圖像標(biāo)簽，但這樣做可能會得到一個解決方案。

請試試這個:

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}
    ]
);