从动态HTML字符串创建元素

时间：2019-08-06 作者：Spedwards

我正在制作一个定制的古腾堡积木save 方法，我以字符串的形式动态更改HTML。

element.createElement(
    \'div\',
    null,
    contentString,
)
上面的代码片段只是将HTML作为字符串输出，将所有符号转换为HTML实体(<, >, 等等）

如何编写实际的HTML？

2 个回复
最合适的回答,由SO网友:Sally CJ 整理而成

您可以使用dangerouslysetinnerhtml, React中的特殊HTML属性：

dangerouslySetInnerHTML 是React的替代品innerHTML 在浏览器DOM中。通常，从代码中设置HTML是有风险的，因为很容易在不经意间将用户暴露给cross-site scripting (XSS) 袭击因此，您可以直接从React设置HTML，但您必须键入dangerouslySetInnerHTML 并用__html 钥匙，提醒自己这很危险。

ES5：

wp.element.createElement( \'div\', {
    dangerouslySetInnerHTML: {
        __html: \'<b>HTML</b> here\'
    }
} );


const createMarkup = ( html ) => { return { __html: html } };

const my_element = <div dangerouslySetInnerHTML={ createMarkup(\'<b>HTML</b> here\') }></div>;
或在古腾堡，您可以使用wp.element.RawHTML() 这与上面的代码片段基本相同。

ES5：

wp.element.RawHTML( {
    children: \'<b>HTML</b> here\'
} );


import { RawHTML } from \'@wordpress/element\';

const my_html = \'some dynamic <b>HTML</b> here!\';

const my_element = <RawHTML>{ my_html }</RawHTML>;

SO网友:Vortac

我尚未对其进行测试，但您可能希望尝试：

element.createElement(
    \'div\',
    null,
    {dangerouslySetInnerHTML: {__html: contentString}},
)

标签： plugin-development   block-editor   小码农  

相关推荐