reactjs - React - 将 props/state 传递给渲染的 HTML 字符串？

Question

在我的 React 应用程序中，我将一个文本模板作为 HTML 字符串存储在服务器上，该模板被传递到客户端进行渲染。是否可以以可以访问其父组件 state/props 的方式呈现此 HTML 字符串？我尝试过使用 dangerouslySetInnerHTML 和 ReactDOMServer.renderToString()，它们都将字符串渲染为 HTML，但渲染 {props.text}作为文字字符串，而不是对组件 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 应用程序时，只有在编译时在应用程序中静态引用/导入的组件才能在运行时在浏览器上使用。

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

1. 将其渲染为服务器上的最终 HTML，发送该 HTML 并让一个简单的 React 组件为其执行 dangerouslySetInnerHTML。但是，就像您已经观察到的那样，该内容必须是完整的 HTML 代码，没有模板、变量、JSX 等。此时一切都是字符串和 HTML，无需再进行处理。

2. 或者，发送 Markdown 文档并获得 Markdown component将其解析为 HTML 并显示。

3. 创建一个复杂的组件，可以接收字符串、解析它、标记它、替换其中的值等。本质上，创建您自己的模板处理组件，它可以读取模板(从您的模板发送下来的字符串)服务器)并将适当的值嵌入其中。

一个简单的解决方案(将值替换到模板中)是:

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 组件还很远。