反应 - 将 props/state 传递给渲染的 HTML 字符串?

Question

在我的 React 应用程序中，我将一个文本模板作为 HTML 字符串存储在服务器上，该字符串向上传递给客户端进行渲染。是否可以以可以访问其父组件的方式呈现此 HTML 字符串state/props？我尝试使用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组件将其解析为 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 组件。