Question

在Gutenberg块中使用的简单组件都在edit：和save中：在此简化示例中，它仅在componentDidMount中设置一个状态变量，然后让render（）对其进行显示。这可以在后端按预期方式工作，但是当我尝试查看页面render（）时看不到变量，但变量不存在。由于控制台中未显示console.logs，因此使问题更加棘手。我不知道这是否是同一问题的一部分。思想得到赞赏。

( function( blocks, element ) {

    blocks.registerBlockType( 'daisy/grid-view', {
        title: 'Daisy: Single Image View',
        icon: 'universal-access-alt',
        category: 'common',

        attributes: {
            pid         : {type: 'number'},
        },

        edit: function( props ) {

        return( 
        <p>
            <DaTest></DaTest>
        </p>)

        },
        save: function( props ) {

            console.log( "save")
            return (

                <p>xxx
                    <DaTest></DaTest>
                </p>
            )
        },
    } );
}(
    window.wp.blocks,
    window.wp.element,
    window.wp.editor

) );

-

class DaTest extends React.Component {

    render() {
        console.log( "in test")

        var xxx = JSON.stringify( this.state )
        return  (
            <div>
                inside DaTest Render [{xxx }] // xxx shows as {}
            </div>
        )
    }
    componentDidMount() {
        this.setState( {aaa : "aaa" })
    }
}

Answer 1

所以看来我误解了古腾堡（Gutenberg）积木的工作方式。保存中传递的是渲染的输出，前端从未看到过该组件。

重新思考。

componentDidMount没有被调用

1 个答案: