我设法让它工作，下面是正确的代码：

JS file

const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;

const { InspectorControls} = wp.blockEditor;
const { PanelBody,ToggleControl } = wp.components;

const BlockEdit = (props) => {
    const { attributes, setAttributes } = props;
    const { haveRead } = attributes

    return(

        <div className={props.className}>

            <InspectorControls>

                <PanelBody
                // Generalk Settings
                    title={__(\'General Settings\', \'df-portfolio\')}
                    initialOpen={true}
                >
                        <ToggleControl
                className="js-book-details-read"
                label="Read"
                checked={haveRead}
                help={haveRead ? "This book has been read." : "Currently unread."}
                onChange={checked => setAttributes({ haveRead: checked })}
                />
                </PanelBody>

            </InspectorControls>


        </div>
    );


}

registerBlockType(\'df/portfolioblock\', {
    title: __(\'DF Portfolio\', \'df-portfolio\'),
    icon: \'portfolio\',
    category: \'df-block\',
    supports: {
        // Turn off ability to edit HTML of block content
        html: false,
        // Turn off reusable block feature
        reusable: false,
        // Add alignwide and alignfull options
        align: false
        },
    attributes: {
        haveRead: {
            type: \'boolean\',
            selector: \'js-book-details-read\'
            },

    },
    save: props => {
        return null
        },
    edit:BlockEdit,

});

PHP file

add_action(\'init\', function() {
    wp_register_script(\'df-portfolio-block-js\',  plugins_url( \'assets/js/block-df-portfolio.js\', __FILE__ ),
        [\'wp-blocks\', \'wp-element\', \'wp-editor\', \'wp-components\', \'wp-data\',\'wp-i18n\']
    );

    register_block_type(\'df/portfolioblock\', [
        \'editor_script\' => \'df-portfolio-block-js\',
        \'editor_style\' => \'df-portfolio-block-style\',
        \'render_callback\' => \'df_gutenberg_portfolio_render\',
    ]);

});


function df_gutenberg_portfolio_render($attributes, $content) {

    $book_details_have_read = $attributes[\'haveRead\'];
    ob_start(); // Turn on output buffering

    ?>


        <?php if ($book_details_have_read) : ?>
            <p><em>This book has been read.</em></p>
            <?php endif;

    /* END HTML OUTPUT */

    $output = ob_get_contents(); // collect output
    ob_end_clean(); // Turn off ouput buffer

    return $output; // Print output

}