将React组件注入HTML

Question

我试图从外部来源接收一段HTML标记，并将React组件注入到它的特定部分中，然后再进行渲染。

为此，我一直在使用react-html-parser （ https://github.com/wrakky/react-html-parser ）

我有这个示例在工作……尽管如此，但它感觉很笨拙，不可能实现这一目标的最佳方法。

// a simple component
const Image = props => {
    return <img {...props}/>    
};

// this resource comes from an external source and can differ
// ultimately, I would like to be able to target certain elements selecting their data-attributes
// to insert a React component
const externalHTML = '<div class="image"></div>';

// using the react-html-parser library to convert the externalHTML into a React component
const DynamicReactComponent = ReactHtmlParser(externalHTML);

// manually injecting a React component into the dynamically created component
DynamicReactComponent.props.children.push(<Image src="something/anything.jpg" />);

另一个例子，设置有点复杂。

const externalHTML = '
    <div class="someClass">
        <figure class="image">
            <img src=""/>
            <figcaption></figcaption>
        </figure>
    </div>';

// using the react-html-parser library to convert the externalHTML into a React component
const DynamicReactComponent = ReactHtmlParser(externalHTML);

// way too hacky....
// and it does not fully work
DynamicReactComponent.props.children.map(child => {
    if(typeof child === 'object' && 'type' in child) {
        switch(child.type) {

            case 'img':
                // this cannot be done as it's readonly
                child.props.src = 'something/anything.jpg';
                break;

            case 'figcaption':
                return child.props.children.push(<Text/>)

            default:
        }
    }
});

在此示例中，我希望为图像元素添加一个src，为figcaption添加一个标题。 标记的其余部分需要保持不变，但应进行相应渲染。 只是为了澄清，我已经准备逻辑Reactify属性，如class变为className 。

我知道react-html-parser有一种自定义方式来转换节点。 但这迫使我在代码中定义结果的外观。 我从外部来源收到的HTML是动态的，包装image div元素（及其属性）的数量可能会有所不同。

我有点失落。 实现此目标的最佳方法是什么？

Answer 1

您可以使用ReactDOMServer将React元素注入HTML标记（ ReactDOMServer.renderToString在浏览器中也可用）。 逐步算法将是：

1）将您的React元素渲染为字符串

2）创建一个template元素，并将加载的HTML粘贴到它的innerHTML属性中（您需要template因为您想在呈现HTML 之前注入React）

3）将React组件的HTML注入template内的特定元素

4）在页面上渲染template内容

5）根据需要水合反应成分

在StackBlitz上查看此演示https://stackblitz.com/edit/react-yvncqj

Answer 2

我坚信这可以在盖茨比完成。

类似的插件示例： gatsby-remark-custom-image-component

正如您在描述中所看到的-图像节点已转换为react组件。

可以使用自定义组件 htmlAst但显示htmlAst用法-深入了解此内容（AST操作）

YAML 2 HTML显示了有关更结构化数据的简单示例。

Gatsby可以处理任何可想象的数据源中的数据。