gpt4 book ai didi

react-native-render-html - 在react-native-render-html自定义渲染器中提取原始HTML

转载 作者:行者123 更新时间:2023-12-04 08:53:24 25 4
gpt4 key购买 nike

我正在使用react-native-render-html来渲染html。renderers方法允许我提供自定义函数来呈现特定标签。不过,我想使用源代码中的原始内部 HTML 将子组件替换为我的自定义组件。

考虑一下。我将以下 html 片段提供给 <HTML />组件:

<a> <b> <c meta="xyz"> Some text </c> <b> </a>

我有一个自定义渲染器,它返回一个接受 html 字符串的组件,并用它做一些魔法:

const renderers = {
c: () => (
<Custom html={/** how do I get "<c meta="xyz"> Some text </c>"? */} />
)
}

最佳答案

该 API 最初并不是为处理此类用例而设计的,但对于 5.0.0 版本来说,它非常简单!

版本 6.x

import * as React from 'react';
import HTML, {domNodeToHTMLString} from 'react-native-render-html';

function CustomRenderer({ tnode, style, key }) {
const html = React.useMemo(() => domNodeToHTMLString(tnode.domNode), [tnode]);
return <Custom key={key} html={html} style={style} />;
}

版本 5.x

从版本 5 开始,在新的 domNodeToHTMLString util 的帮助下变得非常容易,请参阅下面的代码片段:

import * as React from 'react';
import HTML, {domNodeToHTMLString} from 'react-native-render-html';

function customRenderer(htmlAttribs, children, inlineStyle, passProps) {
const html = domNodeToHTMLString(passProps.domNode);
return <Custom key={passProp.key} html={html} />;
}

4.x 及以下版本

要使用此技巧,您需要将“stringify-entities”添加到依赖项列表中。这个 hack 的主要作用是使用 alterNode 钩子(Hook)向 DOM 节点添加一个非常规的 __rawHtml 属性。此后该属性将被传递给渲染器函数。

import * as React from 'react';
import HTML from 'react-native-render-html';
import strigifyEntities from 'stringify-entities';
import Custom from './Custom';

function renderOpeningTag(tag, attributes) {
const strAttributes = [];
Object.keys(attributes).forEach((key) => {
strAttributes.push(`${key}="${strigifyEntities(`${attributes[key]}`)}"`);
});
return `<${tag}${strAttributes.length ? ' ' : ''}${strAttributes.join(' ')}>`;
}

function nodeToRawHTML(root) {
let html = '';
if (root.type === 'tag') {
const strChildren = root.children.reduce((prev, curr) => {
return `${prev}${nodeToRawHTML(curr)}`;
}, '');
html = `${renderOpeningTag(root.name, root.attribs)}${strChildren}</${
root.name
}>`;
} else if (root.type === 'text') {
const text = strigifyEntities(root.data);
html = text;
}
return html;
}

function alterNode(node) {
if (node.type === 'tag' && node.name === 'c') {
node.attribs.__rawHtml = nodeToRawHTML(node);
}
}

const renderers = {
c: ({__rawHtml}, children, convertedCSSStyles, passProp) => {
return <Custom key={passProp.key} html={__rawHtml} />
},
};

export default function App() {
return (
<HTML
renderers={renderers}
alterNode={alterNode}
html={'<a> <b> <c meta="xyz"> Some text </c> <b> </a>'}
/>
);
}

关于react-native-render-html - 在react-native-render-html自定义渲染器中提取原始HTML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63979897/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com