如何在React JS / Gutenberg中使用wp.hooks.addAction()?

时间:2019-05-06 17:27:43

标签: wordpress wordpress-gutenberg

我能够成功使用wp.hooks.applyFilters()wp.hooks.addFilter(),但是我无法使用wp.hooks.addAction()渲染React组件。但是,console.log()在动作的回调中运行良好。这是我的代码:

import { createHooks } from '@wordpress/hooks';

let globalHooks = createHooks();

const Header = () => {
    return (
        <h1>Header Component</h1>
    );
}

const RevisedHeader = () => {
    return (
        <h1>Revised Header Component</h1>
    )
}

export default class App extends Component {

    constructor( props ) {
        super();

        globalHooks.addFilter( 'replace_header', 'revisedHeaderCallback', this.revisedHeaderCallback );
        globalHooks.addAction( 'after_replace_header', 'afterRevisedHeaderCallback', this.afterRevisedHeaderCallback );
    };

    revisedHeaderCallback( header ) {
        return <RevisedHeader />;
    }

    afterRevisedHeaderCallback() {
        return <RevisedHeader />;
    }

    render() {

        return(
            <div className="App">
                { globalHooks.applyFilters( 'replace_header', <Header /> ) }
                { globalHooks.doAction( 'after_replace_header' ) }
            </div>
        );
    }
}

0 个答案:

没有答案