返回模态抛出异常的`edit()`

Question

我有一个简单的按钮，应该直接从模态示例启动模态：

edit: withState( {
isOpen: false,
} )( ( { isOpen, setState } ) => (
<div>
<Button isDefault onClick={ () => setState( { isOpen: true } ) }>Open Modal</Button>
{ isOpen ?
<Modal
title="This is my modal"
onRequestClose={ () => setState( { isOpen: false } ) }>
<Button isDefault onClick={ () => setState( { isOpen: false } ) }>
My custom close button
</Button>
</Modal>
: null }
</div>
) ),

然而，它抛出了一个例外：

警告：React.createElement:type无效--应为字符串(用于内置组件(或类/函数(用于复合组件(，但得到：未定义。您可能忘记导出组件，或者您可能混淆了默认和命名导入。

Answer 1

我犯的错误是假设Modal存在于editor上。我有这个：

const {Button, Modal} = editor;

将导入更正为以下内容，修复了此问题：

const {Button, Modal} = wp.components;

在后端，当您注册组件时，您会希望wp-components作为依赖项，当然：

wp_register_script(
'recipe-block',
ZRDN_PLUGIN_DIRECTORY_URL . $relativeScriptPath, // File.
array( 'wp-components','wp-blocks', 'wp-i18n', 'wp-compose', 'wp-editor', 'wp-data','wp-element', 'underscore' ), // Dependencies.
filemtime( ZRDN_PLUGIN_DIRECTORY . $relativeScriptPath ) // filemtime — Gets file modification time.
);