reactjs - 替换 html 字符串中的 javascript 样式对象

Question

以下是我的反应代码块

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”样式对象。

新反应，所以需要帮助

Answer 1

使用dangerouslySetInnerHTML.

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

代替

{Parser(htmlString)}

无需使用html-react-parser.

如果你真的需要 Parser，可能你必须使用它。

import Parser from "react-html-parser";

参考这里关于 react-html-parser