Javascript 如何使用选择器在JSX中为常量设置默认变量

我对PHP和Wordpress主题化有相当丰富的经验，但现在正在努力使用新的Gutenberg编辑器。我已经创建了一个自定义块插件，它涉及很多JS（React）。对于后者，我有点陌生

该块正在创建一个简单的包装器div，并根据选择器的输入为其分配一个HTMLlang属性。但是，只有在更改选择器时，以下代码才能正常工作。默认情况下，langCode变量保持为空。知道哪里出了问题吗

registerBlockType( 'lang-group-block/lang-group', {
    // Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
    title: __( 'Language group', 'lang-group-block' ), // Block title.
    icon: 'flag', // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
    category: 'layout', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
    keywords: [
        __( 'Language', 'lang-group-block' ),
        __( 'Group', 'lang-group-block' ),
    ],

    attributes: {
        // Register langCode attribute to save the chosen language
        langCode: {
            type: 'string',         
        },
    },

    edit( { attributes, setAttributes, className } ) {
        const {
            langCode = 'en', 
        } = attributes;


        const groupIndicatorStyle = {
            fontSize: 14,
            color: "#ff0000",
            textAlign: "center",
            paddingTop: "40px",
        }

        return (            
            <Fragment>
                <InspectorControls>
                    <PanelBody
                        title={ __( 'Language', 'rapp2020-lang-group-block' ) }
                        initialOpen={ true }
                    >
                        <SelectControl
                            label={ __( 'Language', 'rapp2020-lang-group-block' ) }                         
                            value={ langCode }
                            options={ [
                                {
                                    value: 'en',
                                    label: __( 'EN', 'rapp2020-lang-group-block' ),
                                },
                                {
                                    value: 'nl',
                                    label: __( 'NL', 'rapp2020-lang-group-block' ),
                                },
                                {
                                    value: 'de',
                                    label: __( 'DE', 'rapp2020-lang-group-block' ),
                                },
                            ] }
                            onChange={ ( selectedOption ) => setAttributes( { langCode: selectedOption } ) }
                        />
                    </PanelBody>
                </InspectorControls>
                <div style={ groupIndicatorStyle }>
                    language group: { langCode }
                </div>
                <div
                    className={ className }
                    lang={ langCode }
                >
                    <InnerBlocks />
                </div>
            </Fragment>
        );      
    },

    save( { attributes, className } ) {
        const {
            langCode = '',
        } = attributes;

        let classes = className;
        if ( '' == langCode ) {
            { langCode: 'en' }
        }   

        return (
            <div
                className={ classes }
                lang={ langCode }
            >
                <InnerBlocks.Content />
            </div>
        );
    },
} );

registerBlockType（'lang group block/lang group'{
//块名称。块名称必须是包含命名空间前缀的字符串。例如：my plugin/my custom块。
标题：\（'Language group'，'lang group block'），//块标题。
图标：'标志'，//阻止Dashicons中的图标→ https://developer.wordpress.org/resource/dashicons/.
category:'layout'，//Block category-根据公共特征（例如公共、格式、布局小部件、嵌入）将块分组在一起。
关键词：[
__（“语言”、“语言组块”），
__（“组”、“语言组块”），
],
属性：{
//注册langCode属性以保存所选语言
语言代码：{
键入：“字符串”，
},
},
编辑（{attributes，setAttributes，className}）{
常数{
langCode='en'，
}=属性；
常量groupIndicatorStyle={
尺寸：14，
颜色：“ff0000”，
textAlign：“居中”，
paddingTop：“40px”，
}
报税表（
setAttributes（{langCode:selectedOption}）}
/>
语言组：{langCode}
);      
},
保存（{attributes，className}）{
常数{
langCode=“”，
}=属性；
让classes=className；
如果（''==langCode）{
{langCode:'en'}
}   
返回(
);
},
} );

这应该是可行的：

save( { attributes, className } ) {
    const { langCode } = attributes;
    let classes = className;

    return (
        <div
            className={ classes }
            lang={ langCode || 'en' }
        >
            <InnerBlocks.Content />
        </div>
    );
},

---

这回答了你的问题吗？嗨，谢谢你的回答。当我在空白页上使用更新的块，并且不更改选择器时，前端输出如下：

测试默认值

，因此未设置html lang属性。请参阅编辑。我不能完全复制这种行为。以上代码对我来说运行良好。但是，我建议在属性定义中使用default关键字，因为实际上您使用的是en值作为默认值。非常感谢！默认关键字已计算出来（也在第一个答案的代码中）。您可以解释一下使用“const el=wp.element.createElement；”的区别吗对于返回函数，使用el表示“返回…”的区别是什么？第一个是es5，第二个是JSX。当您将JSX粘贴到babeljs.io中时，您将得到类似React.createElement（'div'，null，'foobar'）；Wordpress已经实现并在一定程度上修改了该函数（我猜）为wp.element.createElement。和常数el=。。。这是一条你经常看到的捷径。因此，基本上，使用返回el（Fragment，null，…）；将React Component片段作为包装器及其子项返回。这对你有意义吗？

;( function ( wp ) {

    const el = wp.element.createElement;
    const __ = wp.i18n.__;

    const { Fragment } = wp.element;
    const { InspectorControls , InnerBlocks } = wp.blockEditor;
    const { PanelBody , SelectControl } = wp.components;

    wp.blocks.registerBlockType( 'lang-group-block/lang-group', {
        // Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
        title: __( 'Language group', 'lang-group-block' ), // Block title.
        icon: 'flag', // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
        category: 'layout', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
        keywords: [
            __( 'Language', 'lang-group-block' ),
            __( 'Group', 'lang-group-block' ),
        ],

        attributes: {
            // Register langCode attribute to save the chosen language
            langCode: {
                type: 'string', 
                default : 'en'       
            },
        },

        edit( { attributes, setAttributes, className } ) {

            const groupIndicatorStyle = {
                fontSize: 14,
                color: '#ff0000',
                textAlign: 'center',
                paddingTop: '40px',
            }

            return el( Fragment, null , 
                el( InspectorControls, null,
                  el( PanelBody,
                    { title: __('Language', 'rapp2020-lang-group-block'), initialOpen: true },
                    el(SelectControl, {
                      label: __('Language', 'rapp2020-lang-group-block'),
                      value: attributes.langCode,
                      options: [
                        { value: 'en', label: __('EN', 'rapp2020-lang-group-block') },
                        { value: 'nl', label: __('NL', 'rapp2020-lang-group-block') },
                        { value: 'de', label: __('DE', 'rapp2020-lang-group-block') }
                      ],
                      onChange: function onChange(selectedOption) { return setAttributes({ langCode: selectedOption }); }
                    })
                  )
                ),
                el( 'div', { style: groupIndicatorStyle }, 'language group: ', attributes.langCode  ),
                el( 'div', { className: className, lang: attributes.langCode }, el(InnerBlocks, null) )
              );
        },

        save( { attributes, className } ) {
            return el( 'div', { className: className, lang: attributes.langCode || 'en' }, el(InnerBlocks.Content, null) );
        },
    } );

} )( window.wp );