Question

我有一个简单的按钮，应该可以启动模式https://www.zerorpc.io/：

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：类型无效-预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记了导出定义文件中的组件，否则您可能混淆了默认导入和命名导入。

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.
);

返回模式的`edit（）`抛出异常

1 个答案: