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

问题描述

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

我使用 React 作为模板引擎来生成模板的基础（html、header、body）。我需要注入一个值（一个 json 对象作为字符串，用 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>

如何解决？

标签： reactjsserver-side-renderingreact-dom

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

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

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

问题描述

解决方案

推荐阅读