componentDidMount 沒有被調用

Question

在編輯和保存中古騰堡塊中使用的簡單組件：在這個簡化的示例中，它只是在 componentDidMount 中設置一個 state 變量，然后讓 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

所以看起來我誤解了古騰堡塊的工作方式。 在保存中傳遞的是渲染的 output，前端永遠看不到組件。

重新思考。