ReactDOMServer - как игнорировать транс-кучу некоторых значений с помощью метода renderToString - PullRequest
Новая
       31

ReactDOMServer - как игнорировать транс-кучу некоторых значений с помощью метода renderToString

1 голос
/ 05 июля 2019

иногда я хочу игнорировать trans-pile в renderToString.

Я использую 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>

как это исправить?

1 Ответ

1 голос
/ 05 июля 2019

Попробуйте это https://zhenyong.github.io/react/tips/dangerously-set-inner-html.html. Как это: 

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