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

hec6srdp 于 2023-06-25 发布在 React

关注(0)|答案(2)|浏览(96)

这个问题与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>
感谢帮助！谢谢

css

来源：https://stackoverflow.com/questions/59089223/html-to-react-how-can-i-replace-all-img-elements-with-a-react-component-while

2条答案

按热度按时间

2sbarzqh1#

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

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

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

赞(0）回复(0）举报 2023-06-25

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

赞(0）回复(0）举报 2023-06-25

我来回答

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

2条答案

相关问题

热门标签

最新问答