ReactDOMServer - 如何使用 renderToString 方法忽略 trans-pile 一些值

Question

有时候，我想忽略 renderToString 中的 trans-pile。

我正在使用 React 作为模板引擎来生成模板的基础（html、header、body）。我需要注入一个值（json object 作为字符串，用 JSON.stringify 转换）才能在浏览器上作为全局变量访问它。

这是我的模板组件：

export default function (props) {
    return (
        <html>
            <head>
                <meta charSet="utf-8"/>
            </head>
            <body className="rtl">
                <div id="app-root"></div>
                <script>
                    myValue = {JSON.stringify(props.obj)}
                </script>
            </body>
        </html>
    );
}

这是渲染和传递值的地方：

let template = <Template obj={obj}/>;

template = ReactDOMServer.renderToString(template);

template = '<!DOCTYPE html>' + template;

res.status(status).send(template);

在运行之后，'myValue' 是未定义的，因为 renderToString 插入插入为 HTML 注释并且还像这样更改数据结构（转换字符）：

<script>
myValue = <!-- -->{&quot;a&quot;:&quot;a&quot;,&quot;b&quot;:&quot;b&quot;}
</script>

如何解决？

Answer 1

试试这个 https://zhenyong.github.io/react/tips/dangerously-set-inner-html.html。像这样：

<script dangerouslySetInnerHTML={JSON.stringify(props.obj)} />

ReactDOMServer - 如何使用 renderToString 方法忽略 trans-pile 一些值

ReactDOMServer - how to ignore trans-pile some values with renderToString method

reactjs

server-side-rendering

react-dom