React Ionic 5:如何将对象从 App 组件传递到 Tab 组件 [英] React Ionic 5: How to pass object from App component to Tab component

问题描述

我使用 Ionic 5 标签模板创建了一个 Ionic React 应用程序.

I have created an Ionic React app using Ionic 5 tab template.

我想将一个对象从 App 组件传递到选项卡组件.

I want to pass an object from App component to tab component.

有什么办法吗?

Tab1 和 Tab2 是我的选项卡组件.

Tab1 and Tab2 are my tab components.

注意:我希望这个对象在两个具有双向数据绑定的 Tab 组件中使用，即，只要该对象在一个 Tab 组件中更改，它就必须在第二个 Tab 组件中更新.我想要无需使用 Redux 或任何第三方库即可实现.

Note: I want this object to be used in both Tab components with two way data binding i.e. whenever that object is changed in one Tab component, it must be updated in second Tab component.I want to achieve it without using Redux or any third party library.

我的应用组件如下所示:

My App component is like below:

<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>

推荐答案

你可以使用 React.Context 使用 React Hooks 实现选项卡之间的简单状态交互，然后您可以向上移动到 React.useReducer

以下是使用 React.Context 的基本示例 - CodeSandbox.io 上的示例

Below is a basic example using React.Context - Example on 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;

将应用程序包装在提供程序中

Wrap the application in the provider

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>
  );
};

这篇关于React Ionic 5:如何将对象从 App 组件传递到 Tab 组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！