Question

在我的React应用程序中，我将一个文本模板作为HTML字符串存储在服务器上，该文件模板被传递给要呈现的客户端。是否可以以能够访问其父组件state / props的方式呈现此HTML字符串？我尝试过使用dangerouslySetInnerHTML和ReactDOMServer.renderToString()，两者都将字符串渲染为HTML，但将{props.text}渲染为文字字符串，而不是对组件的引用。 s props。

例如，在我已存储的服务器上：

<div>Welcome to my app</div>
<div>{props.message}</div>
<div>Have fun</div>

组件

import React from "react"
import { connect } from "react-redux"

const mapStateToProps = (state) => {
    return { state }
},
    WelomeBody = (props) => {
        return (
            <div dangerouslySetInnerHTML={{"__html": props.state.welcomeMessageBody}} />
        )
    }

export default connect(mapStateToProps, null)(WelomeBody)

但结果是：

Welcome to my app
{props.message}
Have fun

有没有办法可以渲染它以便访问props.message的值，而不是仅仅按字面呈现它？

Answer 1

如果你想到的是将一个React组件（用JSX语法）发送到你的服务器并让客户端以某种方式将它重新水化/编译成一个实际的工作组件，这是不容易实现的。

在构建和捆绑React应用程序时，只有在编译时在应用程序中静态引用/导入的组件才能在运行时在浏览器上使用。

因此，为了从模板动态呈现组件并将变量嵌入其中，您的选择是：

将其渲染为服务器上的最终HTML，发送该HTML并让一个简单的React组件为其执行dangerouslySetInnerHTML。但是，就像你已经观察到的那样，内容必须是完整的HTML代码，没有模板，变量，JSX等。此时一切都是字符串和HTML，不再需要处理。
或者，发送 Markdown 文档并让Markdown component将其解析为HTML并显示它。
创建一个复杂的组件，可以接收字符串，解析它，标记它，替换它中的值等。基本上，创建自己的模板处理组件，可以读取模板（从您的模块发送的字符串）服务器）并将适当的值嵌入其中。

一个简单的解决方案（将值替换为模板）将是：

function Filler(props) {
    let html = props.template;
    Object.keys(props).forEach(key => {
        if (key !== "template")
            html = html.replace("{" + key + "}", props[key]);
    });

    return <div dangerouslySetInnerHTML={{__html: html}} />;
}

并像

<Filler template={"<h1>Hello, {firstname} {lastname}</h1>"} firstname="John" lastname="Doe" />

但同样，这远不是一个成熟的实际React组件。

React - 将props / state传递给呈现的HTML字符串？

1 个答案: