如何将跨度注入字符串并将其作为 HTML 在我的 React 应用程序中打印

Question

我有这段代码，它可以接受一个字符串和一些变量并将变量注入到字符串中。这在我的应用程序中是必需的，因为文本通常来自 CMS 并且必须是可编辑的。有时字符串的可变部分是彩色的或不同的字体，所以我试图制作它以便在必要时将其包装起来。但是我的 React 应用程序将所有内容都作为字符串发布。

 var VariableInjection = (stringToEdit, variablesToInject) => {
    const matches = stringToEdit.match(/{[a-z][A-z]*}/g);
    const strippedMatches = matches.map(m => m.replace('{', '')).map(m => m.replace('}', ''));

    for (let i = 0; i < matches.length; i += 1) {
        const replaceWith = variablesToInject[strippedMatches[i]];
        if (typeof replaceWith === 'string' || typeof replaceWith === 'number') {
            stringToEdit = stringToEdit.replace(matches[i], replaceWith);
        } else {
            stringToEdit = stringToEdit.replace(matches[i], `<span class="${replaceWith.class}">${replaceWith.value}</span>`);
        }
    }

    return stringToEdit;
};

VariableInjection("this is the {varA} and this is the {varB}", { varA: 1, varB: 2}) 给出：

'this is the 1 and this is the 2'

VariableInjection("this is the {varA} and this is the {varB}", { varA: 1, varB: { value:2, class:"test Class"}) 给出：

'this is the 1 and this is the <span class="test Class">2</span>'

Answer 1

听起来您需要在呈现文本的组件上使用 dangerouslysetinnerhtml。顾名思义，这不一定是最佳解决方案（谨慎使用），但它应该可以解决您的代码工作方式的问题。

编辑：JSFiddle

  render: function() {
    return <div dangerouslySetInnerHTML={{ __html: html }}></div>;
  }

如何将跨度注入字符串并将其作为 HTML 在我的 React 应用程序中打印

How can I inject a span into a string and have it printed in my react app as HTML

html

javascript

text-to-html

reactjs