反应块显示不必要的 br 标签

Question

我正在构建 sn-p 块以在 <pre><code> 标记内添加代码。

但是，当查看代码时 - <pre> 标签有不必要的标签。

我的 sn-p 块反应代码

  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

但是上面的测试 sn-p 被拉成： 渲染后的 sn-p 块，没有换行符和
标签。

问题源于 HTML 存储。存储期间格式错误的问题。

存储在mysql中的sn-p。

如何解决这个问题。这样代码就可以在<pre><code>块内用换行符存储和查看，而<pre>标签中没有不必要的类

Answer 1

默认情况下，React 会转义您的 HTML，以防止对您的网站进行跨站脚本攻击 (XSS)。如果您想发布纯 HTML，您应该在您的 HTML 元素上使用 dangerouslySetInnerHTML 属性并将 innerHTML 作为对象传递，其中键是 __html，值是您要发布的 HTML。

dangerouslySetInnerHTML

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

所以你可以这样写代码：

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

---

关于自动添加到<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' );

虽然请注意，这会从您的网站中删除 Gutenberg 自动添加的 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 库来管理您网站前端的块。如果你不使用它们，你可以按照上面的说明删除它们。