React块显示不必要的br标记

Question

我正在构建代码段块，以便在

标记中添加代码。
但是，当查看代码时，
标记具有不必要的标记。
我的代码段块反应代码
  edit({ attributes, setAttributes, isSelected }) {
    const { text } = attributes;

    return (
      <Fragment>        
            <RichText
              identifier="text"
              value={text}
              placeholder={__('Text')}
              onChange={nextText => {
                setAttributes({
                  text: nextText,
                });
              }}
            />
      </Fragment>
    );
  },

  save({ attributes }) {
    const { text } = attributes;

    return (
      <pre>
          {text && (<code>{text}</code> )}
      </pre>
    );
  },
};
Python program to illustrate destructor
class Employee:
Initializing
def __init__(self):
print('Employee created.')
Deleting (Calling destructor)
def __del__(self): print('Destructor called, Employee deleted.')
obj = Employee()
del obj
                




Answer 1

React默认情况下会转义您的HTML，以防止对您的网站的跨站点脚本攻击(XSS)。如果希望发布纯HTML，应该在HTML元素上使用dangerouslySetInnerHTML道具，并将InnerHTML作为对象传递，其中键是__HTML，值是希望发布的HTML。

dangerouslySetInnerHTML是React在浏览器DOM中使用innerHTML的替代品。通常，从代码设置HTML是有风险的，因为它很容易无意中使用户暴露于跨站点脚本(XSS)攻击。因此，您可以直接从React设置HTML，但您必须键入dangerouslySetInnerHTML并传递一个带有__HTML键的对象，以提醒自己这是危险的。

因此您可以将代码编写为：

<pre>
    {text && ( <code dangerouslySetInnerHTML={{ __html: text}} /> )}
</pre>

关于自动添加到

元素中的wp-block-example-snippet类，您可以通过将其添加到WordPress中主题的function.php文件中来删除它：
function wpassist_remove_block_library_css(){
    wp_dequeue_style( 'wp-block-library' );
} 
add_action( 'wp_enqueue_scripts', 'wpassist_remove_block_library_css' );
但请注意，这将从您的网站中删除古腾堡自动添加的CSS文件：
<link rel='stylesheet' id='wp-block-library-css'  href='https://nextseasontv.com/wp-includes/css/dist/block-library/style.min.css' type='text/css' media='all' />
Gutenberg使用这些CSS库来管理站点前端的块。如果您没有使用它们，您可以按照上面的说明删除它们。