替换 html 字符串中的 javascript 样式对象答案

【问题标题】：Replacing a javascript style object in a html string替换 html 字符串中的 javascript 样式对象
【发布时间】：2018-08-30 04:08:18
【问题描述】：

以下是我的反应代码块

import React from 'react';
import { render } from 'react-dom';
import Parser from 'html-react-parser';
var styles = {
    primaryLable60: {
        fontSize: '60px',
        color: '#dedede',
        direction: 'ltr',
        textAlign: '-webkit-auto',
    }
};
var htmlString = "<div style={styles.primaryLable60}>Hello World</div>";

const renderRoot = document.getElementById('root');
render(
    <div>
        {Parser(htmlString)}
        <div style={styles.primaryLable60}>
            Hello World
        </div>
    </div>
    , renderRoot)

我需要在渲染时获取实际的“styles.primaryLable60”样式对象。

刚开始反应，所以需要帮助

【问题讨论】：

你为什么使用Parser？
我确实看到您的代码可以正常运行codesandbox.io/s/1ozwzn6vo7
有什么顾虑？
我认为您实际上不需要任何parser 或dangerouslySetInnerHTML，您知道您需要渲染 div 以便可以将其放入 jsx 并加载样式。当您的 html 动态（可能来自后端）时，解析器会很有用。
这只是一个示例。实际上我上面提到的 htmlString 是从后端获取的

标签： reactjs html-react-parser

【解决方案1】：

使用dangerouslySetInnerHTML。

<div dangerouslySetInnerHTML={{__html: htmlString}} />

代替

{Parser(htmlString)}

无需使用html-react-parser。

如果你真的需要 Parser，也许你必须使用。

import Parser from "react-html-parser";

refer here about react-html-parser

【讨论】：

如果这是所需的输出，那么真的不需要Parser.. React 内置支持就足够了.. 这就是为什么我问 OP 引入Parser 的原因是什么，我想可能是 OP 有更多的想法谁知道..
是的，不需要解析器，如果我们只想将纯文本显示为 html 元素，dangerouslySetInnerHTML 就足够了。
这只是一个示例。实际上我上面提到的 htmlString 是从后端获取的
那么你也可以使用dangerouslySetInnerHTML
没有解决我的问题