无效的挂钩调用。在 WordPress 的管理部分使用 ReactJS（特别是编辑自定义帖子类型）

Question

我想在 WordPress 中创建一个基于 React 的自定义帖子类型编辑器。我创建了一个插件，它：

1. 注册自定义帖子类型 my-custom-post
2. 将
   注入 < code>/wp-admin/post-new.php?post_type=my-custom-post
3. 构建一个简单的 React 应用程序，在

/wp-admin/plugins/my-custom-plugin/src/index.js

const {
    useState
} = wp.element;

function Example(props) {
    const [value, setValue] = useState(new Date());

    return <h1>Hello!</h1>;
}

render(
    <Example />,
    document.getElementById( 'root' )
);

依赖项

λ yarn list --pattern react
yarn list v1.22.15
├─ @babel/[email protected]
├─ @babel/[email protected]
├─ @babel/[email protected]
├─ @babel/[email protected]
├─ @babel/[email protected]
├─ @babel/[email protected]
├─ @pmmmwh/[email protected]
├─ @svgr/[email protected]
├─ @types/[email protected]
├─ @types/[email protected]
├─ @wojtekmaj/[email protected]
├─ [email protected]
│  └─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
│  └─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]

< strong>wp-content/plugins/my-custom-plugin/package.json

{
    "name": "my-custom-plugin",
    "version": "1.0.0",
    "description": "I build, therefore I'm awesome.",
    "scripts": {
        "build": "wp-scripts build",
        "format": "wp-scripts format",
        "lint:css": "wp-scripts lint-style",
        "lint:js": "wp-scripts lint-js",
        "start": "wp-scripts start",
        "packages-update": "wp-scripts packages-update"
    },
    "engines": {
        "node": ">=8.0.0",
        "npm": ">=6.0.0"
    },
    "devDependencies": {
        "@wordpress/scripts": "^20.0.2"
    },
    "dependencies": {
        "react-multi-date-picker": "^3.3.0"
    }
}

错误

react-dom.min.js?ver=17.0.1:141 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 https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.