Question

我的目标是使用wp.element中的.createElement()添加HTML，但它会以文本形式输出，例如：

wp.element.createElement(
        Meta,
        {   
            className: 'TEST',
            title: 'TEST',
            initialOpen: true,
        },  
        'Here is html: <input type="text">'
);

我在这里想念什么？

Answer 1

如果您希望正确地在DOM中使用wp.element.render与创建的元素。

请参见文档中的示例：

<div id="greeting"></div>

<script>
function Greeting( props ) {
    return wp.element.createElement( 'span', null, 
        'Hello ' + props.toWhom + '!'
    );
}

wp.element.render(
    wp.element.createElement( Greeting, { toWhom: 'World' } ),
    document.getElementById( 'greeting' )
</script>

Answer 2

在您的链接中看到的话，WordPress的使用有反应

Element is, quite simply, an abstraction layer atop React.

这意味着您使用顶级的React api

https://reactjs.org/docs/react-api.html#createelement

React无法传递您像innerHtml这样添加js代码的权限，因为这很危险（任何脚本都可以从文本运行）。

例如，某些坏蛋可以使用此漏洞进行XSS攻击。

但是，如果您需要在元素中添加一些HTML，则可以使用方法dangerouslySetInnerHTML

https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

function createMarkup() {
  return {__html: 'First &middot; Second'};
}

React.createElement('h1', { dangerouslySetInnerHTML: createMarkup() }, `Welcome to react world`)

https://github.com/purescript-contrib/purescript-react/issues/53#issuecomment-164175324

.createElement（）与HTML

2 个答案: