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是动态的，例如包裹div的{{1}}元素（及其属性）可能会有所不同。

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

Answer 1

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

1）将您的React元素呈现为字符串

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

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

4）在页面上呈现template内容

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

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

Answer 2

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

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

您将在说明中看到-图像节点被转换为react组件。

Custom components可以使用-降价示例，但显示htmlAst的用法-深入了解（AST操作）

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

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

将React组件注入HTML

2 个答案: