如何：为 Wordpress Gutenberg 的保存功能提供具有内部块的组件？

问题描述

我有什么：

我有一个用 React 库和 tailwind 编写的 UI 套件。
此 UI 套件中的每个元素都使用函数式方法和挂钩。
每个组件都有依赖于 props（我将其转换为属性）的逻辑。

而问题是，由于这个函数的限制，我无法在 Gutenberg 的 save 函数中重用这些组件。（保存函数不能使用有钩子等副作用的组件/函数）

因此，在第一种情况下，我需要重新使用我的组件，我使用了这种方法：

export default function save({attributes}) {
     const {text,variant} = attributes;
     return (
         <> 
            {parseHTML(ReactDOMServer.renderToString(
                <Button variant={variant}>
                    <RichText.Content value={text}/>
                </Button>
            ))}
         </>
     );
 }

使用 react-dom/server 将组件及其子组件转换为字符串
使用 html-react-parser 将该字符串转换为单个 React 组件
提供该组件保存功能

到目前为止它工作得很好，我不需要将 InnerBlocks 用于嵌套块：

const save = ({attributes})  => {
    return (
        <div>
            {parseHTML(
                ReactDOMServer.renderToString(
                    <Wrapper>
                        <InnerBlocks.Content/> 
                    </Wrapper>
                )
            )}
        </div>
    );
}

和错误：

index.js:5130 Uncaught (in promise) Error: Component(...): nothing was returned from render. This usually means a return statement is missing. Or,to render nothing,return null.
at validateRenderResult (index.js:5130)
at processChild (index.js:5254)
at resolve (index.js:5150)
at ReactDOMServerRenderer.render (index.js:5633)
at ReactDOMServerRenderer.read (index.js:5570)
at Object.renderToString (index.js:6178)
at save (index.js:7448)
at getSaveElement (blocks.js:9166)
at getSaveContent (blocks.js:9213)
at addParsedDifference (block-editor.js:14707)

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

gutenberg-blocks wordpress-gutenberg