Use global function inside react render fragment

Questions
1

Hi Guys,

Today I fight with a common and maybe easy to solve problem.

I would like to use gloabl app.methods inside the react render

for example:

 render() {
    return (
      ...
      <BlockTitle>{this.app.methods.myCustomFunction()}</BlockTitle>

)
}

Obviously, this is not correct.
There is a way to call a global function without use state ?
Thanks in advance.
regards.

2 
import { f7 } from 'framework7-react';

render() {
    return (
      ...
      <BlockTitle>{f7.methods.myCustomFunction()}</BlockTitle>

)
}
3

https://framework7.io/react/react-component-extensions.html#components-properties

If you use functional components, then previously described extensions will not work. Framework7 instance, f7ready method and theme can be imported directly from Framework7-React library. Device, Request and Support can be imported directly from Framework7 core library.

import { Device, Request, Support } from 'framework7';
import { f7, f7ready, theme } from 'framework7-react';
4

perfect ! Thanks a lot.

5

Printing f7 inside a constructor of my custom class I get “undefined”

6

It can be referenced only after app initialized, in your case i guess you are trying to put it in some initial app component? Then it won’t work, move that function to somewhere else, or use and load content correctly with router

7

Hey there! How can we declare the method in f7.methods object to use it properly later in other components? Thanks in advance.
Kind regards

8

I guess declaring the method in the routes.js file but to dive deeper… Could we access to the router with a f7 method from a functional component? For instance, to make programatic navigation. Thanks!