React Ioni c 5: Как передать объект из компонента App в компонент Tab - PullRequest
Новая
       68

React Ioni c 5: Как передать объект из компонента App в компонент Tab

0 голосов
/ 15 марта 2020

Я создал приложение Ioni c React с использованием шаблона вкладки Ioni c 5.

Я хочу передать объект из компонента приложения в компонент вкладки.

Есть ли какие-либо способ сделать это?

Tab1 и Tab2 мои компоненты вкладки.

Примечание: Я хочу, чтобы этот объект использовался в обоих компонентах Tab с двухсторонней привязкой данных, т.е. всякий раз, когда этот объект изменяется в одном компоненте Tab, он должен обновляться во втором компоненте Tab. Я хочу достичь этого без использования Redux или какой-либо сторонней библиотеки.

Мой компонент приложения выглядит следующим образом: 

<IonApp>
    <IonReactRouter>
      <IonTabs>
        <IonRouterOutlet>
            <Route path="/tab1"
                    component=Tab1
                    exact={true} />
            <Route path="/tab2"
                    component=Tab2
                    exact={true} />
          <Route path="/" render={() => <Redirect to="/tab1" />} exact={true} />
        </IonRouterOutlet>
        <IonTabBar slot="bottom">
            <IonTabButton tab={"Title1"} href={"/tab1"}>
              <IonIcon icon={settings} />
              <IonLabel>{"Title1"}</IonLabel>
            </IonTabButton>
            <IonTabButton tab={"Title2"} href={"/tab2"}>
              <IonIcon icon={settings} />
              <IonLabel>{"Title2"}</IonLabel>
            </IonTabButton>
        </IonTabBar>
      </IonTabs>
  </IonReactRouter>
</IonApp>

Ответы [ 2 ]

0 голосов
/ 17 марта 2020

вы можете использовать React.Context с React Hooks для простого взаимодействия состояний между вкладками, затем вы можете перейти на React.useReducer

Ниже приведен basi c пример с использованием React.Context - Пример на CodeSandbox.io 

import React from "react";

// create the context
export const Context = React.createContext();

// create the context provider, we are using use state to ensure that
// we get reactive values from the context...
export const TheProvider = ({ children }) => {
  // the reactive values
  const [sharedValue, setSharedValue] = React.useState("initial");

  // the store object
  let state = {
    sharedValue,
    setSharedValue
  };

  // wrap the application inthe provider with the initialized context
  return <Context.Provider value={state}>{children}</Context.Provider>;
};

export default Context;

Обернуть приложение в провайдере 

import { TheProvider } from "./some-context";

const App: React.FC = () => {
  return (
    <IonApp>
      <TheProvider>
       {/* here the provider wraps the whole application to allow */}
       {/* access to the context that is defined */}
        <IonReactRouter>
          <IonTabs>
            <Route
              path="/"
              render={() => <Redirect to="/tab1" />}
              exact={true}
            />
            <IonRouterOutlet>
              <Route path="/tab1" component={Tab1} exact={true} />
              <Route path="/tab2" component={Tab2} exact={true} />
            </IonRouterOutlet>
            <IonTabBar slot="bottom">
              <IonTabButton tab={"Title1"} href={"/tab1"}>
                <IonLabel>{"Title1"}</IonLabel>
              </IonTabButton>
              <IonTabButton tab={"Title2"} href={"/tab2"}>
                <IonLabel>{"Title2"}</IonLabel>
              </IonTabButton>
            </IonTabBar>
          </IonTabs>
        </IonReactRouter>
      </TheProvider>
    </IonApp>
  );
};

А теперь пример использования во вкладке 

const Tab2 = () => {
  // use react hooks to get the context and the information that is stored
  // in the context, the value and the function to modify the value
  const { sharedValue, setSharedValue } = React.useContext(AppContext);
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>TAB ONE</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <>
          <h2>TAB TWO</h2>
          <div>{sharedValue}</div>
          <IonButton
            onClick={() =>
              setSharedValue("From Tab 2: " + new Date().getMilliseconds())
            }
          >
            Update Value
          </IonButton>
        </>
      </IonContent>
    </IonPage>
  );
};
0 голосов
/ 15 марта 2020

вы можете использовать ваш компонент Tab в реквизитах рендеринга <Route> и передавать свой объект в компонент Tab. 

<Route
  path="/tab1"
  exact={true}
  name="routeName"
  render={props => (
    <Tab1 object={yourObject}  />
  )} />

так же вы можете передавать все реквизиты как этот <Tab1 {...props}/>.

Или вы можете использовать Redux https://react-redux.js.org/

...