块编辑器给出无效的钩子调用错误

Question

我正在尝试让 wordpress 块编辑器加载到反应项目中：https://www.npmjs.com/package/@wordpress/block-editor。

我已经完全按照 npm 页面上的示例进行了设置，但它给出了一个无效的钩子错误。我想这可能是由于错误提示的版本不匹配造成的？

这是代码：

import {
  BlockEditorProvider,
  BlockList,
  WritingFlow,
  ObserveTyping
} from "@wordpress/block-editor";
import { SlotFillProvider, Popover } from "@wordpress/components";
import { useState } from "@wordpress/element";
import "@wordpress/components/build-style/style.css";
import "@wordpress/block-editor/build-style/style.css";

export default function MyEditorComponent() {
  const [blocks, updateBlocks] = useState([]);

  return (
    <BlockEditorProvider
      value={blocks}
      onInput={(blocks) => updateBlocks(blocks)}
      onChange={(blocks) => updateBlocks(blocks)}
    >
      <SlotFillProvider>
        <Popover.Slot name="block-toolbar" />
        <WritingFlow>
          <ObserveTyping>
            <BlockList />
          </ObserveTyping>
        </WritingFlow>
        <Popover.Slot />
      </SlotFillProvider>
    </BlockEditorProvider>
  );
}

以及典型的钩子错误：

Error
Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See [link] for tips about how to debug and fix this problem.

我已经设置了一个代码笔来在这里使用它：https://codesandbox.io/s/sleepy-proskuriakova-op59q

我查看了 wordpress 版本的 react，它似乎是 16.6.3，所以在沙箱中设置它并使用当时使用 16.6.2 但没有变化的旧版本的 react 脚本 (2.1.8)错误。试了好几个版本组合都没有变化

究竟是什么导致了这个错误？我怎样才能加载这个组件？

Answer 1

这是一个有效的 codesandbox。

我更改的内容：

react 和 react-dom 到 16.13.1 这是 @wordpress/element
必须添加 DropZoneProvider
安装@wordpress/block-library并调用registerCoreBlocks

有关更多代码示例，您可以查看 the official storybook docs，源代码位于面板底部的 Story 选项卡下。

块编辑器给出无效的钩子调用错误

Block editor giving invalid hook call error

reactjs

wordpress-gutenberg