.createElement() with HTML

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 使用 react 就像你从你的链接中看到的那样

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 · Second'};
}
React.createElement('h1', { dangerouslySetInnerHTML: createMarkup() }, `Welcome to react world`)

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