In order to execute a function from a layout / component, you will need to pass component / layout reference to other side. React supports a special attribute that you can attach to any component, pass reference to other side, and you can access the functions of the component in the layout accessing |
Sample App.js |
import React, { Suspense, lazy } from "react"; import { BrowserRouter, Switch } from "react-router-dom"; import DashboardLayoutRoute from "./DashboardLayout"; import Home from "./Home"; const Connections = lazy(() => import("./Connections")); class App extends React.Component { constructor() { super(); console.log("App Initialized"); } render() { return ( <BrowserRouter basename={this.APP_PATH}> <Switch> <DashboardLayoutRoute exact path="/" component={Home} /> </Switch> <Suspense fallback={<div>Loading...</div>}> <Switch> <DashboardLayoutRoute path="/connections" component={Connections} /> </Switch> </Suspense> </BrowserRouter> ); } } export default App; |
Sample Layout |
import React from "react"; import { Route } from "react-router-dom"; class DashboardLayoutComponent extends React.Component { constructor(props) { super(props); this.callBackToComponent = this.callBackToComponent.bind(this); } componentDidMount() { console.log("Layout Component Did Mount"); let _this = this; if (this.props.children.type._result instanceof Promise) { this.props.children.type._result.then(function(data) { _this.callBackToComponent(); }); } else { this.callBackToComponent(); } } componentDidUpdate() { console.log("Layout Component Did Update"); let _this = this; if (this.props.children.type._result instanceof Promise) { this.props.children.type._result.then(function(data) { _this.callBackToComponent(); }); } else { this.callBackToComponent(); } } callBackToComponent() { let t = this.props.children.type; if (t.prototype !== undefined) { t.prototype.callBackToParentComponent(this); } else { // If you use your Route in Suspense t._result.prototype.callBackToParentComponent(this); } } callbackParent() { console.log("Layout function called from some component"); } render() { return ( <div className={"dashboard-main-container"}> <div className="container"> <div className="row"> <div className="col-sm-10 right-body-container"> {this.props.children} </div> </div> </div> </div> ); } } const DashboardLayoutRoute = ({ component: Component, ...rest }) => { return ( <Route {...rest} render={matchProps => ( <DashboardLayoutComponent {...matchProps}> <Component key={matchProps.match.params.id} {...matchProps} /> </DashboardLayoutComponent> )} /> ); }; export default DashboardLayoutRoute; |
Sample Component |
import React from "react"; import { Link } from "react-router-dom"; class Connections extends React.Component { constructor() { super(); console.log("Connections"); } // this function will be called from layout function with self reference // so calling [layout.callbackParent()] will call a function inside layout component itself callBackToParentComponent(layout) { console.log("callBackToParentComponent for Connections"); layout.callbackParent(); } render() { return ( <div> <h1>Connections</h1> <Link to={"/"}>Home</Link> </div> ); } } export default Connections; |
Sample console.log |
App Initialized App Initialized Layout Component Did Mount callBackToParentComponent for Connections Layout function called from some component Connections Connections Home Home Layout Component Did Mount callBackToParentComponent for Home Layout function called from some component Connections Connections Layout Component Did Mount callBackToParentComponent for Connections Layout function called from some component |
Sample Output: |
Live Example At codesandbox.io: https://codesandbox.io/s/reactjs-call-methods-functions-between-component-and-layout-fydou |
Thursday, February 20, 2020
ReactJS Call Methods / Functions Between Component And Layout
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment