React 块显示不必要的 br 标签

Question

我正在构建片段块以在 <pre><code> 标记内添加代码。

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

我的片段块反应代码

  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>
    );
  },
};

从 gutenberg 编辑器插入的代码 - 用于测试。

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

但是上面的测试片段被拉取为：没有换行符和
标签的渲染片段块。

问题源于 来自HTML 存储。存储过程中格式错误导致的问题。

mysql 中存储的片段。

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

中不必要的class

Answer 1

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

dangerouslySetInnerHTML

dangerouslySetInnerHTML is React’s replacement for using innerHTML in the browser DOM. In general, setting HTML from code is risky because it’s easy to inadvertently expose your users to a cross-site scripting (XSS) attack. So, you can set HTML directly from React, but you have to type out dangerouslySetInnerHTML and pass an object with a __html key, to remind yourself that it’s dangerous.

所以你会把你的代码写成：

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

关于自动添加到您的 <pre> 元素的 wp-block-example-snippet class，您可以通过将其添加到 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 库来管理您网站前端的块。如果您不使用它们，您可以按照上述说明将其删除。

React 块显示不必要的 br 标签

React block showing unnecessary br tag

javascript

reactjs

wordpress-gutenberg

dangerouslySetInnerHTML