如何将React组件放在HTML字符串中? [英] How to put React component inside HTML string?

问题描述

我有:一个 HTML字符串数组，例如 [< h1> Hi"，</h1>" ].
我想在它们之间放置< MyReactComponent/>
(因此实现了在jsx中的布局:
< h1> Hi< MyReactComponent/></h1> ).

I have: an array of HTML strings, eg ["<h1>Hi", "</h1>"].
I want to place <MyReactComponent/> in between them
(thus achieving a layout that would be in jsx:
<h1>Hi<MyReactComponent/></h1>).

我该如何实现?

我尝试过:

• Babel.transform('< h1> Hi< MyReactComponent/></h1>')(使用独立的Babel).它确实可以工作，但是需要我对< MyReactComponent/> 进行字符串化，这不是很优雅，可能会破坏一天的时间..

• Babel.transform('<h1>Hi<MyReactComponent/></h1>') (using standalone Babel). It does work, but requires me to stringify <MyReactComponent/>, which is not elegant and probably will break some day.

使用常规jsx render()=>< MyReactComponent/> ，然后在 componentDidMount 上通过操作DOM在HTML前面添加，但是浏览器会自动插入结束标记，所以我会得到< h1> Hi</h1>< MyReactComponent/>< h1></h1>

to use regular jsx render() => <MyReactComponent/>, and then, on componentDidMount prepending HTML by manipulating DOM, but browser inserts closing tags automatically, so I'll be getting <h1>Hi</h1><MyReactComponent/><h1></h1>

使用 jsx-to-html 库和 innerHTML ，将< MyReactComponent/> 转换为HTML字符串，将其与< h1> Hi</h1> 组合，但会破坏与< MyReactComponent/> 的任何React交互.

to use jsx-to-html library and innerHTML, to convert <MyReactComponent/> to HTML string, combine it with <h1>Hi</h1>, but it destroy any React interaction with <MyReactComponent/>.

推荐答案

您可能想看看此库将字符串转换为DOM元素的节点树，然后使用您定义的一组指令将每个节点转换为React元素.我认为这取决于字符串是否是有效的标记，因此您可能必须将< h1> Hi< MyReactComponent/></h1" 更改为类似<; h1> Hi .

This library converts the string to a node tree of DOM elements, then transforms each node to a React element using a set of instructions that you define. I believe that it depends on the string being valid markup though, so you might have to change "<h1>Hi<MyReactComponent/></h1" to something like "<h1>Hi<x-my-react-component></x-my-react-component></h1>.

示例:

import { Parser, ProcessNodeDefinitions } from "html-to-react";
import MyReactComponent from "./MyReactComponent";

const customElements = {
    "x-my-react-component": MyReactComponent
};

// Boilerplate stuff
const htmlParser = new Parser(React);
const processNodeDefinitions = new ProcessNodeDefinitions(React);
function isValidNode(){
    return true;
}

// Custom instructions for processing nodes
const processingInstructions = [
    // Create instruction for custom elements
    {
        shouldProcessNode: (node) => {
            // Process the node if it matches a custom element
            return (node.name && customElements[node.name]);
        },
        processNode: (node) => {
            let CustomElement = customElements[node.name];
            return <CustomElement/>;
        }
    },
    // Default processing
    {
        shouldProcessNode: () => true,
        processNode: processNodeDefinitions.processDefaultNode
    }
];

export default class MyParentComponent extends Component {
    render () {
        let htmlString = "<h1>Hi<x-my-react-component></x-my-react-component></h1>";
        return htmlParser.parseWithInstructions(htmlString, isValidNode, processingInstructions);
    }
}

此处必不可少的部分是 processingInstructions .从顶部开始，对照数组中的每个指令检查DOM树中的每个节点，直到 shouldProcessNode 返回true，并且相应的 processNode 将节点转换为React元素功能.这允许相当复杂的处理规则，但是如果您要处理嵌套的自定义元素，它很快就会变得有些混乱.该示例的结果等同于

The essential part here is processingInstructions. Every node in the DOM tree is checked against each instruction in the array, starting from the top, until shouldProcessNode returns true, and the node is transformed to a React element by the corresponding processNode function. This allows for rather complex processing rules, but it quickly gets a bit messy if you want to process nested custom elements. The result of the example is the equivalent of

<h1>
    Hi
    <MyReactComponent/>
</h1>

JSX语法中的

.希望这会有所帮助！

in JSX syntax. Hope this helps!

这篇关于如何将React组件放在HTML字符串中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！