Gutenberg和ESNext中的多个高阶组件

2024-05-19 • 问答

我正在尝试在古腾堡（Gutenberg）使用HOC withInstanceId（以生成唯一的标识符以用作HTML中的ID）和withColors（以在边栏中使用颜色选择器），并我不确定正确的Esnext语法。（而且我从技术上讲应该是正确的非Esnext语法...）

这是我的出发点，但这显然是不正确的：

const { __ } = wp.i18n;

const { registerBlockType } = wp.blocks;
const { withColors } = wp.editor;
const { withInstanceId } = wp.compose;

registerBlockType( 'blocksetc/test',{
    title: __( 'title' ),attributes: {
        highlightColor: {
            type: "string"
        },},edit: withColors( 'highlightColor' )( function ({ attributes,setattributes,classname,instanceId }) {
        return (

        );
    },save( { attributes } ) {
        return (

        );
    },} );

需要一些指导。

我建议使用Gutenberg utilities来组成HOC。我没有了解您的案情，因此我认为基本的WordPress block example是一个很好的起点，并将其与您的代码结合起来可以得到以下信息：

const { __ } = wp.i18n;

const { registerBlockType } = wp.blocks;
const { withColors } = wp.editor;
const { compose,withInstanceId } = wp.compose;

const BaseHtml = ({instanceId,highlightColor}) => {
    console.log(highlightColor);
    return (<div id={'my-custom-' + instanceId}>Hello World,step 1 (from the editor).</div>)
};
const CombinedComponent = compose(withColors('highlightColor'),withInstanceId)(BaseHtml);

registerBlockType('gutenberg-examples/example-01-basic-esnext',{
    title: 'Example: Basic (esnext)',icon: 'universal-access-alt',category: 'layout',attributes: {
        highlightColor: {
            type: 'string'
        },},example: {},edit(props) {
        return <CombinedComponent {...props} />;
    },save() {
        return <div>Hello World,step 1 (from the frontend).</div>;
    },});

在这种情况下，组成的HOC的顺序无关紧要，但是请记住，它们是从右到左执行的。古腾堡撰写文档对此进行了描述。

请记住，核心WordPress Gutenberg并非来自Gutenberg团队的最新代码，我建议安装Gutenberg plugin。您将获得有用的提示和更稳定的代码库，且错误更少。例如，在您的代码中，安装了Gutenberg插件后，它会记录以下警告：wp.editor.withColors is deprecated. Please use wp.blockEditor.withColors instead.

Gutenberg和ESNext中的多个高阶组件

czg2009 回答：Gutenberg和ESNext中的多个高阶组件

大家都在问