How to use wp.hooks.addAction() in React JS/Gutenberg?
Question
I am able to successfully use wp.hooks.applyFilters()
and wp.hooks.addFilter()
, but I’m not able to render a React Component using wp.hooks.addAction()
. However, the console.log()
runs just fine within the callback for an action. This is my code:
import { createHooks } from 'wordpress user/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
block-editor, hooks, javascript
4 years
2020-02-06T08:41:22-05:00
2020-02-06T08:41:22-05:00 0 Answers
125 views
0
Leave an answer