反应使用在前端古腾堡区块中不起作用

时间：2020-03-12 作者：kostikovmu

我创建了古腾堡积木。我需要为我的组件提供挂钩使用效果，并将其包括在内：

const { useEffect } = wp.element;
我的示例组件：

function TestComponent(  ) {
  useEffect(() => {
    console.log(\'from useEffect\');
  })
  return (
   <p>from Test</p>
  )
}
我在编辑和保存中使用TestComponent。在编辑模式下，他的工作正常，但在前端不渲染。如果我从TestComponent中删除useEffect，那么他的工作也将在前端完成。

为什么useEffect不能在前端工作？

1 个回复
最合适的回答,由SO网友:Tom J Nowell 整理而成

古腾堡的街区不是这样的。块代码完全在块编辑器中运行，并返回两个结果：

要在编辑器UI中显示的组件，这些组件在渲染时生成HTML并保存到数据库中。第二个组件是这里的关键部分，最终产品只是一个HTML字符串。

因此，如果您想在前端使用React来处理块，您必须自己实现它，就像您想在短代码实现中使用React一样。内容就是内容，Gutenberg并不意味着前端会引入一些React代码，它仍然只是静态HTML，与以前一样。

这意味着要为块的react实现保存一个入口点，以及作为道具传入所需的所有属性，一个用于水合/创建块的迷你react应用程序，以及一些通过搜索这些入口点并使用该初始值旋转react组件来引导它的代码React.render

注册块时可以使用API工具来确保在适当的时间加载块前端JS资产，这将是一个很好的后续问题。

TLDR: A blocks JS in the editor, and the frontend have no connection other than the HTML string that gets saved in the database

如果确实希望在前端为块构建React实现，并且希望使用wp元素库，则需要在获取脚本时将该库声明为依赖项

标签： block-editor   小码农  

相关推荐