Блог

Я хочу спросить, как получить доступ к методу «TestMethod», который определен в App.tsx, из Home.tsx

Это App.tsx (у этого компонента есть метод с именем «TestMethod»)

 import React from 'react';
import { IonApp, IonRouterOutlet } from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';
import { Route } from 'react-router-dom';
import Home from './pages/Home';

const App: React.FC = () => {
  const testMethod = () => {
    console.log('test');
  };
  return (
    <IonApp>
      <IonReactRouter>
        <IonRouterOutlet>
          <Route path="/home" component={Home} exact />
        </IonRouterOutlet>
      </IonReactRouter>
    </IonApp>
  );
};

export default App;
  

Это Home.tsx

 import { IonContent, IonPage, IonSplitPane, IonButton } from '@ionic/react';
import React from 'react';
import { RouteComponentProps } from 'react-router-dom';

interface ChildComponentProps extends RouteComponentProps<any> {}

const Home: React.FC<ChildComponentProps> = (props) => {
  const onSubmit = () => {
    // I want to access testMethod from App.tsx in here
  };
  return (
    <IonContent>
      <IonSplitPane contentId="main">
        <IonPage id="main">
          <IonButton
            expand="block"
            type="submit"
            class="ion-no-margin"
            onClick={onSubmit}
          >
            Test
          </IonButton>
        </IonPage>
      </IonSplitPane>
    </IonContent>
  );
};

export default Home;
  

Из Home.tsx я хочу выполнить метод «TestMethod», который определен в App.tsx, когда пользователь нажимает кнопку в Home.tsx

Я все еще не могу понять, как этого добиться, ваша помощь очень ценится.

Спасибо.

 <Route path="/home" exact>
   <Home test={testMethod} />
</Route>
  

В Home компоненте

   const onSubmit = () => {
    // I want to access testMethod from App.tsx in here
    props.test()
  };